Flutter. ¿Cómo desarrollar una APP?

En artículos anteriores hemos hablado sobre Flutter, haciendo una introducción sobre el Framework de Google, y cómo este podría ser una alternativa a React, o a React Native. Hoy quiero hacer contigo un pequeño viaje introductorio y ver cómo instalar y desarrollar una aplicación básica con el framework de Dart.

Antes de seguir te recomiendo leer los siguientes artículos:

  1. Flutter. El nuevo framework de Google
  2. React Native vs Flutter. ¿Cuál es mejor para mi producto?

Crear la APP

Para crear nuestra aplicación básica, utilizaremos el Terminal y un editor de texto. Pero podrías también utilizar Android Studio/IntelliJ, o Visual Studio Code. ¡Doy por hecho que ya has instalado Flutter en tu máquina preferida!

Utilizas el comando “flutter create” para crear tu nuevo proyecto:

creamos nuestro proyecto con el comando flutter

Si vienes de otros lenguajes y frameworks, debes tener especial atención a las especificaciones, formatos y buenas prácticas de Dart. En pocos segundos tendrás creado un proyecto Flutter en tu carpeta myflutterapp. Esta carpeta y proyecto ya contendrán un aplicación simple que usa componentes de Material. :)

A partir de esta fase te recomiendo crear ya tu repositorio en Github y agregar ahí tu nueva aplicación. De esta forma puedes empezar ya a versionar tu app.

Ejecutar la APP

Antes de ejecutar tu nueva aplicación, es buena idea verificar si tu dispositivo Android está conectado, ejecutando “flutter devices”. Si tu dispositivo es un iOS, debes seguir las indicaciones específicas para tu dispositivo. De todas las formas el comando “flutter devices” lista a todos los dispositivos que tengas conectados a la máquina.

Ejecutas la aplicación mediante “flutter run”. Si tienes más de un dispositivo Flutter te pedirá que selecciones uno por su ID de dispositivo (deviceId), ¡o que selecciones todos!

ejecutamos flutter

O

ejecutamos flutter escribiendo el ID del dispositivo

Si todo ha ido bien, y tu aplicación ha compilado correctamente - se ha creado un fichero APK -,  deberías poder verla en tu dispositivo.

APP inicial en https://flutter.dev/

Si, como yo, has experimentado errores relacionados con Gradle, los siguientes comandos me ayudaron a solucionarlo:

utilizamos el canal de desarrollo

Hot reload

Tal como hemos comentado en los artículos anteriores sobre Flutter, el framework también tiene la opción de “Hot Reload”,  cómo React. Esto te permite recargar el código de una aplicación que se está ejecutando, y además como es “stateful”, sin perder el estado de la aplicación.

Puedes verlo en acción, editando tu fichero “lib/main.dart” en tu editor preferido. En el fichero main.dart está el código de tu app. Luego tienes que guardar, y escribir “r” en el terminal,  y verás como se actualiza la aplicación casi al instante!

Conclusión

¡Y eso es todo por hoy! En este post hemos hecho solamente una breve aproximación de cómo iniciar el desarrollo de una aplicación móvil en Flutter en un dispositivo Android.

Como has podido ver, no hemos tenido que instalar ningún software en nuestro dispositivo móvil, ya que Flutter hace la iniciación de “lib/main.dart”  él mismo, ¡y además compila el fichero APK de depuración!

En los próximos posts veremos cómo crear nuestro propio código y personalizar la aplicación inicial que ha generado Flutter.

Si tienes alguna duda, o has tenido algún problema instalando la APP,  o instalando Flutter, ¡no dudes en contactarnos!

¿Estás desarrollando APPs en Flutter? ¿Para tí, cuál es el mayor desafío?

Foto: rawpixel en Pixabay

Fuente