Interfaz Flutter que ejecuta un modelo TensorFlow Lite

Curso de Integración Módulos Nativos iOS/Android para Flutter

Contenido del curso

Fundamentos de Flutter e IA

Introducción a TensorFlow Lite

Integración de modelos y clasificación de imágenes

Reconocimiento de voz con Whisper

MethodChannel

Acceso a sensores y cámara

Gestión de estado con BLoC

Reconocimiento de texto en imágenes

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0013:30

Interfaz Flutter que ejecuta un modelo TensorFlow Lite

Curso de Integración Módulos Nativos iOS/Android para Flutter

Clase 6 de 29

Clase 6 / 29

Recursos

Construir la interfaz de una app en Flutter que ejecute un modelo TensorFlow Lite implica conectar tres piezas: el widget principal, el estado de pantalla y el servicio que llama al modelo. Aquí verás cómo armar esa estructura paso a paso, qué hace cada widget y cómo interpretar el resultado final que devuelve el modelo.

¿Cómo se estructura la interfaz visual de la app en Flutter?

La parte visual arranca sobrescribiendo el método build dentro del state de la pantalla. Ese método retorna un Scaffold, que funciona como el esqueleto base de cualquier pantalla en Flutter.

Dentro del Scaffold se definen dos zonas principales:

El AppBar, donde colocas un Text con el título modelo TensorFlow.
El body, donde se centra una Column con todos los elementos de interacción.

La Column contiene tres children clave: un Text que muestra el output del modelo con textAlign al centro, un SizedBox con height para separar visualmente los elementos, y un botón que dispara la función runModel con la etiqueta Ejecutar modelo.

¿Para qué sirve el widget Scaffold en Flutter? Es la estructura base que organiza una pantalla. Te entrega slots predefinidos como appBar, body y floatingActionButton, así no tienes que construir el layout desde cero.

¿Cómo conectar el servicio TensorFlow con la pantalla del modelo?

El flujo de datos va desde MyApp hacia ModelScreen y de ahí al state. En MyApp se retorna un MaterialApp, se desactiva el banner de debug y se define home como una instancia de ModelScreen recibiendo la variable tfService.

Para que esto funcione, el servicio debe inicializarse antes de construir MyApp. Se instancia tfService y se pasa al constructor mediante this.tfService. Si olvidas declararlo en el constructor, Flutter lanza un error indicando que el nombre no existe.

¿Qué diferencia hay entre StatefulWidget y su State?

ModelScreen se declara como StatefulWidget porque necesita manejar datos que cambian: el resultado del modelo. La clase recibe el servicio con required en el constructor y sobrescribe createState para enlazar su estado correspondiente.

El state es donde vive la lógica reactiva. Allí se llama al modelo, se actualiza el output y se vuelve a renderizar la interfaz cuando llega una respuesta nueva.

¿Por qué usar required en el constructor? Porque marca el parámetro como obligatorio. Si no lo entregas al instanciar el widget, el compilador te avisa antes de ejecutar la app.

¿Cómo probar el modelo TensorFlow Lite en el simulador iOS?

Con la estructura lista, abres una terminal nueva y lanzas el simulador con open. Después ejecutas flutter run, que detecta automáticamente los dispositivos disponibles. En este caso, reconoció un iPhone 16.

Al desplegar la app verás el texto inicial y el botón Ejecutar modelo. Al presionarlo, el modelo procesa la imagen de entrada y devuelve una matriz de resultados. Para visualizar todo el output sin recortes, conviene envolver la Column en un SingleChildScrollView y recargar con R mayúscula.

¿Qué significan los resultados que devuelve el modelo?

La imagen que generaste se compara contra los mil y un labels que contiene el modelo. Cada valor de la matriz representa un porcentaje de coincidencia entre tu imagen y uno de esos labels, que en este caso corresponden a nombres de animales.

Para interpretarlo correctamente:

Cada número es un porcentaje de compatibilidad con un label específico.
El label con mayor porcentaje es la predicción dominante del modelo.
Los demás valores muestran qué tan cerca o lejos quedó cada categoría alternativa.

¿Qué es un label en un modelo TensorFlow Lite? Es una etiqueta de clasificación. Cada label representa una categoría posible que el modelo puede reconocer en la imagen que recibe.

¿Qué detalle corregir al imprimir errores en consola?

Un punto fácil de pasar por alto: en el bloque catch no debes imprimir un result, sino el error capturado. Cambiar esa impresión evita confusión cuando la inferencia falla y te entrega trazas reales para depurar.

Con la carga del modelo lista, la imagen creada y convertida, y la respuesta visualizada en pantalla, ya puedes buscar la coincidencia de mayor porcentaje en tu propio resultado. ¿Qué animal salió primero en tu prueba? Cuéntalo en los comentarios.

Resumen

¿Cómo se estructura la interfaz visual de la app en Flutter?

La parte visual arranca sobrescribiendo el método build dentro del state de la pantalla. Ese método retorna un Scaffold, que funciona como el esqueleto base de cualquier pantalla en Flutter.

Dentro del Scaffold se definen dos zonas principales:

El AppBar, donde colocas un Text con el título modelo TensorFlow.
El body, donde se centra una Column con todos los elementos de interacción.

¿Para qué sirve el widget Scaffold en Flutter? Es la estructura base que organiza una pantalla. Te entrega slots predefinidos como appBar, body y floatingActionButton, así no tienes que construir el layout desde cero.

¿Cómo conectar el servicio TensorFlow con la pantalla del modelo?

¿Qué diferencia hay entre StatefulWidget y su State?

El state es donde vive la lógica reactiva. Allí se llama al modelo, se actualiza el output y se vuelve a renderizar la interfaz cuando llega una respuesta nueva.

¿Por qué usar required en el constructor? Porque marca el parámetro como obligatorio. Si no lo entregas al instanciar el widget, el compilador te avisa antes de ejecutar la app.

¿Cómo probar el modelo TensorFlow Lite en el simulador iOS?

¿Qué significan los resultados que devuelve el modelo?

Para interpretarlo correctamente:

Cada número es un porcentaje de compatibilidad con un label específico.
El label con mayor porcentaje es la predicción dominante del modelo.
Los demás valores muestran qué tan cerca o lejos quedó cada categoría alternativa.

¿Qué es un label en un modelo TensorFlow Lite? Es una etiqueta de clasificación. Cada label representa una categoría posible que el modelo puede reconocer en la imagen que recibe.

¿Qué detalle corregir al imprimir errores en consola?

Fundamentos de Flutter e IA

Flutter para Android, iOS y web con un código

IA, Machine Learning y Deep Learning en Flutter

Introducción a TensorFlow Lite

Configura TensorFlow Lite en Flutter

Configuración de modelos TensorFlow Lite en Flutter

Conectar TensorFlow Lite a una interfaz Flutter

Integración de modelos y clasificación de imágenes

Interfaz Flutter que ejecuta un modelo TensorFlow Lite

Seleccionar imágenes de galería en Flutter

Procesar imágenes reales con TensorFlow Lite

Reconocimiento de voz con Whisper

Configuración de permisos para Speech to Text en Android e iOS

Servicio de speech-to-text en Flutter

Conexión de reconocimiento de voz con interfaz visual en móviles

MethodChannel

Comunicación entre Flutter y código nativo con Method Channel

Configuración de Method Channel en Android para obtener nivel de batería

Cómo leer la batería de iOS con Swift

Botón Flutter que lee batería con MethodChannel

Acceso a sensores y cámara

Configuración de Method Channel para cámara en Android desde Flutter

Cámara iOS nativa con MethodChannel en Flutter

Configuración de permisos y provider para cámara en Android

Configuración de permisos de cámara en iOS para Flutter

Integración de cámara nativa iOS en Flutter con Method Channels

Controlador de cámara iOS con FlutterError

Implementación de cámara nativa en apps Android con Flutter

Gestión de estado con BLoC

Implementación de función para capturar transacciones desde imágenes

Cómo leer facturas con ML Kit en Flutter

Reconocimiento de texto en imágenes

Parseo de montos desde texto OCR con regex

Integración de UI con cámara para captura de fotos en Flutter

Cámara en Flutter con BLoC y modal

Actualización de dependencias y corrección de errores en Flutter iOS

Diferencias entre Flutter y React Native para desarrollo móvil

Interfaz Flutter que ejecuta un modelo TensorFlow Lite