Skip to main content
Apps más visuales con Flutter

Apps más visuales y rápidas con Flutter

Flutter

 

Flutter es un framework de desarrollo multiplataforma híbrido que permite desarrollar para las plataformas iOS y Android. Los puntos fuertes de este framework son principalmente la facilidad para crear aplicaciones muy visuales y la rapidez de desarrollo.

El lenguaje con el que se programa en Flutter es Dart 2. Este lenguaje es open-source y su desarrollo está dirigido por Google. Está orientado a ser utilizado como JavaScript pero está fuertemente tipado, por lo que se asemeja a TypeScript. Está evolucionando a ser un lenguaje importante en la generación de UI por código, es muy similar a JSX en React o el nuevo framework SwiftUI.

Actualmente su fuerte son teléfonos y tablets pero ya tenemos las betas oficiales para cubrir Web, Watch, Tv… Está claro que su propósito es cubrir todas las necesidades de desarrollo de un producto con una única tecnología-implementación.

Dart

 

Dart 2 puede compilarse a JavaScript y tiene interoperabilidad con el mismo. Gracias a esto puede utilizarse en desarrollo web y comunicarse con librerías JS. Tiene similitudes con Swift y Kotlin, alguna de ellas es por ejemplo la definición de valores por defecto en funciones o constructores. Dentro de Flutter, puede comunicarse con código nativo en Kotlin y Swift, pudiendo incluirse en proyectos existentes o habilitando la opción de utilizar funcionalidades específicas de las plataformas a través de los mismos.

Dart tiene la capacidad de incorporar, en la mayoría de los casos, cambios de código en tiempo real durante el desarrollo. Es de admirar la facilidad con la que lo hace dando la sensación al desarrollador que no ha habido tiempo de recopilación pareciéndose a JS, por ejemplo, recargando una web. Esto es gracias a su complejo compilador y run-time. En tiempo de desarrollo se intenta el mínimo impacto en recompilar estando el rendimiento poco optimizado y en generación de release se optimiza al máximo.

Arquitectura del framework

 

Está compuesto por varios módulos que permiten tener a disposición los componentes necesarios para desarrollar una aplicación con funcionalidades normales. Podemos distinguir principalmente:

  • Dart como lenguaje y sus librerías.
  • Motor gráfico 2D Skia, próximo motor gráfico de chrome optimizado al máximo para ofrecer un gran rendimiento en cualquier hardware.
  • Core del framework que gestiona los ciclos de vida y permite el desarrollo basado en estados.
  • Componentes visuales. Divididos en dos grandes módulos
  • Material contiene los componentes tradicionales del diseño de google y proporciona una experiencia de uso similar a la que encontramos en android. 
  • Cupertino los elementos imitando la experiencia que encontramos en iOS. En la última release ha sido potenciado ofreciendo una experiencia personalizada completa dentro de iOS.
  • Componentes que nos facilitan el uso de temas y adaptación a diferentes plataformas-pantallas. Nos dividen las plataformas en:
  • Activas: Movil,Tablets… plataformas con una gran interacción por parte del usuario
  • Pasivas: TV, Embebidos… plataformas con poca interacción.

Los “plugins” es la terminología definida por el equipo de desarrollo de flutter para referirnos a los paquetes redistribuibles por los desarrolladores. Flutter proporciona su propio gestor de dependencias para la distribución de estos plugins.

Todos estos módulos son compilados a “nativo”, a código máquina. De esta forma podemos asegurarnos el máximo rendimiento en el dispositivo, aunque hay que aclarar que este compilado no se basa en los lenguajes nativos, es independiente de los mismos incluso de la plataforma o versión de la misma. Esto conlleva diferentes ventajas e inconvenientes. 

Las principales ventajas son:

  • Mayor rendimiento posible del dispositivo.
  • Independencia de la plataforma, flutter se encarga de compilar a bajo nivel.
  • Independiente de la versión de iOS o Android.
  • Abstracción a la hora de implementar características comunes en ambas plataformas.

Los inconvenientes a destacar son:

  • Mayor peso de la aplicación puesto que el framework va compilado en la misma.
  • Gran dificultad para comunicarse con APIs nativas que no tengan plugin.
  • Dificultad para integrarse con librerías de terceros nativas de cada plataforma.

Naturaleza de flutter

 

El framework está orientado a una arquitectura de componentes basados en estado del estilo React. Los componentes pueden ser stateful (con estado) y stateless (sin estado).

Como otros frameworks basados en estados, los componentes visuales se renderizan de nuevo cada vez que el estado del mismo cambie.

Una metodología de desarrollo posible para flutter es Redux ya que está concebida para manejar estados.

Entorno de desarrollo

 

Actualmente flutter ofrece plugins para Android Studio y Visual Studio code. Estos plugins nos facilitan la escritura de código, la ejecución y depuración del mismo en Ambas plataformas.

Una de las funcionalidades a destacar en tiempo de desarrollo es el Hot-reload que permite en la mayoría de los casos refrescar la vista en la que nos encontremos con los últimos cambios de código manteniendo el estado.

Puesto que hay mucho que contar y este framework puede convertirse en uno de los referentes en desarrollos híbridos, continuaremos en un segundo artículo hablando de otros aspectos técnicos como la composición de las vistas (Widgets).

José Luis Moraga

José Luis forma parte del equipo de Consultoría Tecnológica de Deloitte. Cuenta con 6 años de experiencia en el mundo de desarrollos móviles. Su especialidad es el desarrollo de aplicaciones para la plataforma iOS aunque abarca otras tecnologías del mismo ámbito, teniendo una perspectiva completa de este paradigma. Ha participado en varios proyectos relacionados con la movilidad de distinta índole abarcando distintos roles. Además, dentro de Deloitte colabora en la investigación de nuevas tecnologías móviles, tanto híbridas como nativas.