¿Qué es Flutter Attach? 

| Última modificación: 31 de octubre de 2024 | Tiempo de Lectura: 3 minutos

Algunos de nuestros reconocimientos:

Premios KeepCoding

Mejorar el desarrollo de tus apps móviles sí es posible gracias a Flutter Attach. Esta herramienta te facilitará enormemente la depuración en vivo, o sea que no tendrás que detener tu app. Además, también te da flexibilidad a la hora de manejar múltiples dispositivos. En este artículo te enseñaremos a usarla para que optimices el tiempo de desarrollo en Flutter.

qué es Flutter Attach

¿Qué es Flutter Attach?

Como te comentaba, Flutter attach es una función con la que puedes conectar el proceso de depuración de tu aplicación en ejecución directamente con una sesión de depuración de Flutter. Resulta muy conveniente cuando ya tienes una app corriendo en tu dispositivo y necesitas hacer debug o ajustes sin reiniciar el proceso.

Ten en cuenta que, la opción de Flutter Attach es una funcionalidad que se adjunta a las aplicaciones que ya existen, como puede ser, por ejemplo, una aplicación nativa del sistema operativo de Android que incluye el alojamiento de una vista del SDK de Flutter.

¿Para qué sirve?

Flutter Attach te será muy útil en estas situaciones:

  1. Probar cambios sin detener la app.
  2. Realizar hot reload o reinicios rápidos.
  3. Adjuntar la app a un proceso de depuración existente (por ejemplo, si la app ya estaba en ejecución antes de que quisieras empezar a depurar).

Este comando se usa mucho en proyectos de desarrollo móvil, ya que permite una mayor flexibilidad y ahorra tiempo, algo que los desarrolladores valoran mucho.

Características

Cuando uses Flutter Attach, recuerda que podrías encontrarte con una limitación: los puntos de interrupción en el código de inicio podrían no activarse, ya que el código puede ejecutarse antes de que estos puntos estén completamente listos.

Estas son las características que lo convierten en recurso fundamental para desarrolladores Flutter:

  1. Hot Reload en tiempo real: Puedes ver cambios de código de inmediato sin reiniciar la aplicación.
  2. Compatibilidad multiplataforma: Funciona en dispositivos iOS, Android y también en emuladores.
  3. Integración con IDEs: Puedes usarlo con Visual Studio Code, IntelliJ, y Android Studio.
  4. Debug remoto: Permite conectar y depurar una aplicación a través de Wi-Fi, ideal para pruebas en dispositivos físicos sin conexión USB.
  5. Monitorización de widgets: Habilita la funcionalidad de widget inspector que facilita el seguimiento de la creación de widgets, ideal para depuración en interfaces complejas.

Comandos útiles de Flutter Attach

ComandoDescripción
-d, –device-id <id>Selecciona el dispositivo al cual adjuntar la depuración.
–debugEjecuta una versión de la app en modo debug.
–host-vmservice-port <port>Especifica el puerto para la conexión VM del dispositivo con el host.
–track-widget-creationHabilita el rastreo de creación de widgets para mejor análisis de la UI en modo debug.
–pid-file <file>Especifica un archivo para guardar el ID del proceso, útil para hot reload y reinicios de manera remota.
–no-null-assertionsDesactiva las verificaciones adicionales de nulos en código no migrado, útil en ciertos entornos de desarrollo.
Flutter Attach comandos

Ejemplo práctico

Para que veas cómo se utiliza Flutter Attach, aquí tienes un ejemplo práctico paso a paso:

Paso 1: Ejecuta tu aplicación en modo debug

Para iniciar, ejecuta tu aplicación en modo debug. Puedes hacerlo desde tu IDE (VS Code, Android Studio, etc.) o desde la terminal con el comando:

flutter run --debug

Esto lanzará la aplicación en el dispositivo que tengas seleccionado, y podrás ver el resultado en tu emulador o dispositivo físico.

Paso 2: Ejecuta Flutter Attach

Ahora que la aplicación está en marcha, abre otra terminal y ejecuta el comando:

flutter attach

🔴 ¿Quieres entrar de lleno al Desarrollo Mobile? 🔴

Descubre el Desarrollo de Apps Móviles Full Stack Bootcamp de KeepCoding. La formación más completa del mercado y con empleabilidad garantizada

👉 Prueba gratis el Bootcamp en Desarrollo de Apps Móviles por una semana

Este comando adjuntará el proceso de depuración a la aplicación que ya tienes en ejecución. Verás un mensaje como este en tu terminal:

Syncing files to device...
Hot reload for changes: press "r"
Hot restart: press "R"
Observatory debugger available at: http://127.0.0.1:65525/

Con Flutter Attach, puedes aprovechar las funcionalidades de hot reload y hot restart sin tener que reiniciar toda la aplicación. Así puedes hacer ajustes al instante y ver cómo se comportan los cambios.

Paso 3: Conexión remota a través de Wi-Fi (opcional)

También puedes conectar tu dispositivo sin cables, muy útil si tienes un dispositivo iOS. Primero, verifica la configuración de conexión Wi-Fi en Xcode para tu dispositivo iOS y luego, con la app en ejecución, usa el siguiente comando en la terminal para hacer la conexión:

flutter attach --vm-service-host=0.0.0.0

Esta opción sirve bastante para el debug en dispositivos físicos que no están conectados por USB. Además, es posible personalizar el puerto de conexión con –observatory-port, algo recomendable si necesitas un control más específico sobre el flujo de trabajo de depuración.

¿Quieres aprender más sobre herramientas poderosas como Flutter Attach? En el Bootcamp de Desarrollo de Aplicaciones Móviles iOS & Android de KeepCoding, no solo aprenderás las mejores técnicas y frameworks del mercado, sino que tendrás la oportunidad de transformar tu carrera y entrar a una de las industrias más demandadas y con mayor estabilidad laboral. ¡Prepárate para un cambio de vida y forma parte del mundo IT con nosotros!

Jose Luis Bustos
Jose Luis Bustos

Lead Software Architect & Coordinador del Bootcamp en Desarrollo de Apps Móviles iOS & Android.

Posts más leídos

¡CONVOCATORIA ABIERTA!

Desarrollo de apps móviles ios & Android

Full Stack Bootcamp

Clases en Directo | Profesores en Activo | Temario 100% actualizado