Botón Flutter que lee batería con MethodChannel

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:004:52

Botón Flutter que lee batería con MethodChannel

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

Clase 15 de 29

Clase 15 / 29

Recursos

Conectar la lógica nativa con la interfaz visual es el paso que vuelve útil todo el trabajo previo con MethodChannel. Aprenderás a integrar un NativeCommunicator dentro del archivo main de Flutter para mostrar datos del sistema operativo, como el nivel de batería, directamente desde un botón en pantalla.

¿Cómo agregar un botón que invoque código nativo en Flutter?

Para exponer la funcionalidad nativa en la UI, basta con sumar un widget que llame al NativeCommunicator ya creado. La idea es que la interfaz reaccione a un toque y dispare el método que cruza el puente entre Flutter y el sistema operativo.

El flujo dentro de main queda así:

Ubicar el nuevo botón debajo del speechToText existente.
Llamar a NativeCommunicator y al método nativeMethod que envuelve la comunicación.
Invocar getBatteryLevel como la funcionalidad concreta a ejecutar.
Imprimir el result para validar la respuesta en consola.

Una vez conectado, el botón muestra el texto Obtener nivel de batería y dispara la lectura nativa cada vez que el usuario lo presiona.

¿Por qué usar async y await al llamar a MethodChannel?

La comunicación con código nativo no es instantánea: Flutter envía el mensaje, espera la respuesta del lado Android o iOS, y recién después puede mostrar el dato. Por eso, el onPressed necesita ser asíncrono.

El patrón en código se arma con tres piezas clave:

La palabra reservada async antes del cuerpo de la función.
El await delante de la llamada a nativeMethod.
El tipado explícito del result como String para que Dart sepa qué espera recibir.

¿Qué hace async en Flutter? Marca una función como asíncrona, lo que permite usar await dentro de ella y esperar resultados sin bloquear la interfaz.

Envolver toda la lógica entre paréntesis y cerrar con punto y coma es lo que convierte ese bloque en una función válida que el botón puede ejecutar.

¿Cómo probar el MethodChannel en un dispositivo físico?

El emulador funciona para pruebas básicas, pero leer hardware real, como la batería, se ve mejor en un celular conectado. Para esto se abre nuevamente runner.workspace y se despliega la aplicación en el dispositivo físico.

Después de que la build termina, en pantalla aparecen dos botones:

Escuchar voz, que ya existía antes.
Obtener nivel de batería, el botón nuevo que conecta con el código nativo.

Al presionar el segundo, la consola imprime el resultado entregado por el sistema operativo. En la prueba realizada, el valor devuelto fue 100 %, lo que confirma que el puente entre Flutter y el código nativo está funcionando en ambos lados.

¿Qué es MethodChannel en Flutter? Es el mecanismo que permite a Flutter invocar funciones escritas en Kotlin, Java, Swift u Objective C, y recibir datos desde Android e iOS hacia la capa Dart.

¿Qué aprendiste sobre Flutter y los componentes nativos?

Con esta integración queda demostrado que Flutter, mediante MethodChannel, accede a componentes propios de Android e iOS y trae datos del sistema operativo hacia la UI. La misma lógica que se usó para la batería sirve como plantilla para sensores, almacenamiento o cualquier API nativa.

Algunos conceptos que vale la pena fijar de esta práctica:

NativeCommunicator [0:10]: la clase puente que centraliza las llamadas nativas y mantiene el código de UI limpio.
nativeMethod y getBatteryLevel [0:45]: el método genérico que invoca al canal y la operación específica que pide el dato.
async y await [1:30]: la combinación que asegura que el result tipado como String llegue antes de pintarlo en pantalla.
print del result [2:05]: la forma rápida de validar en consola que la información del sistema operativo llegó correctamente.
Despliegue en dispositivo físico [2:20]: el paso que permite leer hardware real y confirmar el 100 % de batería como respuesta.

¿Te animas a replicar este botón con otra funcionalidad nativa, como el nivel de señal o el modelo del dispositivo? Cuéntame en los comentarios qué dato te gustaría exponer desde tu propia app.

Resumen

¿Cómo agregar un botón que invoque código nativo en Flutter?

El flujo dentro de main queda así:

Ubicar el nuevo botón debajo del speechToText existente.
Llamar a NativeCommunicator y al método nativeMethod que envuelve la comunicación.
Invocar getBatteryLevel como la funcionalidad concreta a ejecutar.
Imprimir el result para validar la respuesta en consola.

Una vez conectado, el botón muestra el texto Obtener nivel de batería y dispara la lectura nativa cada vez que el usuario lo presiona.

¿Por qué usar async y await al llamar a MethodChannel?

El patrón en código se arma con tres piezas clave:

La palabra reservada async antes del cuerpo de la función.
El await delante de la llamada a nativeMethod.
El tipado explícito del result como String para que Dart sepa qué espera recibir.

¿Qué hace async en Flutter? Marca una función como asíncrona, lo que permite usar await dentro de ella y esperar resultados sin bloquear la interfaz.

Envolver toda la lógica entre paréntesis y cerrar con punto y coma es lo que convierte ese bloque en una función válida que el botón puede ejecutar.

¿Cómo probar el MethodChannel en un dispositivo físico?

Después de que la build termina, en pantalla aparecen dos botones:

Escuchar voz, que ya existía antes.
Obtener nivel de batería, el botón nuevo que conecta con el código nativo.

¿Qué es MethodChannel en Flutter? Es el mecanismo que permite a Flutter invocar funciones escritas en Kotlin, Java, Swift u Objective C, y recibir datos desde Android e iOS hacia la capa Dart.

¿Qué aprendiste sobre Flutter y los componentes nativos?

Algunos conceptos que vale la pena fijar de esta práctica:

NativeCommunicator [0:10]: la clase puente que centraliza las llamadas nativas y mantiene el código de UI limpio.
nativeMethod y getBatteryLevel [0:45]: el método genérico que invoca al canal y la operación específica que pide el dato.
async y await [1:30]: la combinación que asegura que el result tipado como String llegue antes de pintarlo en pantalla.
print del result [2:05]: la forma rápida de validar en consola que la información del sistema operativo llegó correctamente.
Despliegue en dispositivo físico [2:20]: el paso que permite leer hardware real y confirmar el 100 % de batería como respuesta.

¿Te animas a replicar este botón con otra funcionalidad nativa, como el nivel de señal o el modelo del dispositivo? Cuéntame en los comentarios qué dato te gustaría exponer desde tu propia app.

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

Botón Flutter que lee batería con MethodChannel