intive Argentina Blog

El camino del desarrollador Flutter

Flutter cuenta con una comunidad muy grande y cantidad de video tutoriales y documentación bien hecha a nivel Google, lo que denota el nivel de inversión desde el punto de vista del negocio que le metieron a esta SDK. Pero eso no es lo único, también nos presenta un paradigma nuevo de desarrollo. A diferencia de React native, viene con un gran set de widgets listos para integrar y va muy de la mano con Material Design. Además, nos da la opción de usar un paquete similar en UI y UX a Apple llamado Cupertino Package.

El hecho de que Flutter brinda simplicidad y celeridad para crear apps, lo hace también una herramienta potente para crear prototipos o MVPs de primera instancia. ¿Qué ventajas y desventajas tiene?

  • Para asegurarnos que una app crezca mucho en complejidad y tamaño y no muera en el intento, podemos pensar como medida en que esté alineada con los principios SOLID. En este sentido, Flutter brilla a la hora de crear apps con rapidez, pero siempre manteniendo la línea de simplicidad y cuando no hablamos de nada demasiado complejo.
  • Flutter utiliza una manera (hoy en día moda) de crear interfaz gráfica programáticamente, llamada declarativa. Las pantallas son creadas a modo “blueprint”, utilizando una sintaxis al estilo HTML mezclado con CSS.
  • Cuando se requiere agregar funcionalidades complejas, rebuscadas, con reglas de negocio grandes y asincrónicas se cae en la necesidad de armar una estructura compleja. Para evitar eso, en la comunidad se está utilizando mucho el patrón “Bloc” o “Provider” según el nivel de complejidad requerido.
  • Como aspecto negativo, Flutter SDK tiene tendencia a usar métodos con 4 a 15 parámetros para la configuración de un simple Widget. Además, este último suele tener configuraciones especificas según el uso.
  • Otra desventaja de Flutter es la poca posibilidad de customización de sus widgets, teniendo que recaer en recrearlos desde cero o usar una versión creada por la comunidad.

Consejos para explotar al máximo Flutter

Para mantener la celeridad y calidad de código es muy importante trabajar con una UI y UX con guía de estilos. Así podemos:

  • Facilitar el trabajo cuando queremos crear desde cero widgets similares a otros existentes. Esto resulta muy útil ya que la personalización de widgets existentes, como decíamos antes, es bastante cerrada.
  • Lograr consistencia en el diseño: tipos de fuente, tamaños, colores, botones, campos de formularios).
  • Fomentar el uso del paquete Material Design para evitar pérdida de tiempo en crear widgets similares.

Desde una visión técnica, el punto de control del Engine de Flutter inicia luego de que un objeto visual es agregado al stack de vista al usuario (UIViewcontroller en iOS, Activity Fragment en Android). Por eso es casi nulo lo que se puede configurar previo a este momento, teniendo que recurrir a medios nativos (Ej: configuración del Launch Screen).

La comunidad flatera es muy activa y proactiva en compartir soluciones comunes al desarrollo de una app. Para explotar Flutter al máximo, es buena idea tener una mentalidad de reutilización y sobre todo buscar soluciones en los foros y mejorar desde ahí a tu propio modelo. Incluso podés encontrar cosas necesarias, como un modelo de conexión REST API, que ya fueron creadas y son mantenidas por la comunidad.

¿Cómo comenzar con Flutter?

Para comenzar en este nuevo mundo de Flutter se requiere conocimiento de nivel menor a medio en iOS y Android. Lo que cualquier fluttery necesita es instalar el ambiente para desarrollar. Acá te dejamos algunos pasos:

1) El primer paso será una breve introducción al universo Flutter, visitando el sitio oficial donde encontrarás todo lo necesario para configurar el ambiente paso a paso. En dicho link verás cómo:

  • Descargar e instalar la SDK de Flutter.
  • Descargar Xcode 9.0+, para poder buildear en iOS.
    • El deploy al store depende de Xcode. Por eso, para poder lograrlo, se requiere conocimiento de cómo crear, provisionar y subir apps al store de Apple.
    • Para compilar una versión a un dispositivo iOS hay que autorizar el certificado de tu app dentro del mismo y dar permiso a que la macOS acceda.
  • Descargar Android Studio para poder compilar en Android y deployar al store.
    • Para compilar una versión a un dispositivo Android necesitamos Android 4.1 (API nivel 16) o superior. Además, hay que activar el modo desarrollador en el dispositivo.
    • Para compilar una versión al emulador, se deberá agregar un dispositivo al AVD Manager que cumpla dicha restricción Android 4.1 (API nivel 16) o posterior.

 

2) Configurar IDE.

Opcionalmente, si bien se puede usar cualquier IDE de desarrollo, VS Code es la de mejor performance, estabilidad de compilación, hot-reload y sincronización de archivos. Por eso la recomendamos y les dejamos el tutorial para configurar IDE aquí.

  • Por razones de confort y buena UX es recomendable usar alguna opción de IDE para la que Flutter haya creado los plugins (proveen de templates , code completion, etc.) y para las cuales tengamos soporte oficial.

3) Version control: para trabajar con Git se recomienda usar este .gitignore como base.

4) Configurar Linter: solo se debe colocar en el root del proyecto este archivo.

5) Configurar bash_profile: se recomienda agregar estos comandos al archivo:

6) Deploy: para configurarlo requiere conocimiento en el proceso de cada tecnología.

Conocimiento General

Para cerrar con este artículo, les dejamos algunos recursos que casi seguro van a necesitar. Los dos primeros son un link a los patrones de diseño mencionados al principio:

  • Plugin Provider // Patrón que consiste en el manejo del “estado” de la aplicación basado en una diferenciación entre “UI – State Management”. Ideal para resolver casos simples de implementación. Mas info aquí.
  • Plugin Bloc //Bloc es un plugin que permite implementar dicho patrón de diseño, utilizado para mitigar el acoplamiento dividiendo una funcionalidad en responsabilidades definidas al estilo Viper, con el agregado de máquina de estados para el envío de eventos.
  • Plugin Http //Plugin que nos permite manipular recursos REST más amigablemente
  • i18n //Soporte Internacionalización y localización. Requiere setup extra mínimo en Xcode
  • Device rotation //Cambiar la rotación del dispositivo en tiempo de ejecución requiere un manejo aparte.
    • Se recomienda ajustar explícitamente en el main.dart

  • JSON parsing //Plugin que permite facilitar la serializacion y deserializacion de un objeto a JSON. Leer “how to use” aquí.
  • Splash screen //Para configurar los iconos y launch screen se debe ahcer de manera nativa tanto para iOS como para Android. El motor de Flutter es instanciado luego que un UIViewcontroller o Activity es presentado en pantalla por lo que no tiene control sobre que sucede antes de esto.
  • Push Notifications //Plugin que permite implementar push notifications en iOS o Android de manera genérica. Si bien, también se puede hacer de manera manual utilizando “platform-channels”, no hay motivo para que reinventar la rueda.

PD: No me olvidé de las animaciones. Si bien Flutter tiene herramientas que las facilitan, también requiere tener en cuenta que la jerarquía de los layouts importa mucho y crece en complejidad según la animación que se quiera lograr. Es un tema que merece un artículo aparte, así que lo veremos en un próximo blog.

Fuentes de conocimiento altamente recomendables:

  • Sitio oficial //Un gran lugar donde leer es un must y con mucho material didáctico oficial. Carece de ejemplos de alta complejidad real.
  • Dart tour //Un tour por el mundo de Dart y su poder.
  • Cupertino Package //Si se requiere imitar el look and feel de iOS en la app.
  • Tutoriales //Intive curso online disponible (pedir acceso a DM si corresponde o por medio protocolar a IT).
  • Layouting //Diagramado de pantallas.
  • Box Decoration //Box decoration personalización.
  • Container Widget //Jugando con Containers.
  • ListView //Jugando con ListView.
  • Button //Jugando con botones.

Comandos de terminal útiles:

  • flutter doctor //Chequear que este todo instalado correctamente para usar flutter.
  • sudo xcode-select –switch /Applications/Xcode.app/Contents/Developer //Selecciona Xcode para usar.
  • open -a Simulator //Abrir simulador.
  • flutter create my_app //Crear app de flutter.
  • flutter run //Corre app flutter del directorio actual.
  • flutter devices //Muestra los dispositivos disponibles para correr la app. Parametros de compilacion extra: —profile —release
  • flutter build apk -t lib/main.dart //Crea compilado Android.
  • flutter build ios -t lib/main.dart //Crea compilado para iOS.
  • emulator –list-avds
  • emulator –avd <emulatorName> -no-snapshot-load //Reinicia el emulador sin utilizar una snapshot del mismo. Usar seguido este comando para evitar bugs de dev tools

Enjoy Flutter!

Aunque aún está en una etapa media y depende mucho de librerías de terceros (lo que lo hace inestable), con faltantes de bibliotecas que uno consideraría básicas en una nueva tecnología, Flutter parece ser igualmente una buena opción para el mundo de híbridos, gracias a su fácil nivel de aprendizaje y versatilidad. La documentación de Google es muy buena y, si algo falla, no hay nada que una búsqueda en línea no cure. Siempre teniendo en cuenta que como todo hibrido tiene sus limitaciones de nivel de complejidad alcanzable y la velocidad de desarrollo se pierde mientras más meticuloso uno se vuelve.

Vos, ¿qué pensás? ¿Cuál es tu experiencia con Flutter?

¡Dejame tus comentarios y aprendemos juntos!

Never settle…

Daniel Antoriano Takagaki

Daniel Antoriano Takagaki es desarrollador de software en intive desde Octubre 2012. Taka es Técnico en desarrollo de videojuegos, egresado de la Escuela Multimedial Leonardo Da Vinci. Además de desarrollarlos, también los juega, dado que el gaming es uno de sus hobbies. En la compañía, integra la brigada IOS.  

Deja un comentario