Introducción a Flutter y comunicación con desarrollo Nativo

Dentro de la línea de conocimiento de EDEX (Emerging devices experience) hace más de 1 año que apostamos por el SDK de Google: Flutter para desarrollar aplicaciones multiplataforma. En el pasado hemos probado otro tipo de tecnologías para desarrollar aplicaciones para iOS y Android utilizando una única solución de desarrollo como Xamarin y/o iOnic.

El grupo de expertos que dan forma al TechRadar de la unidad tomaron la decisión de que tanto Xamarin como iOnic no eran tecnologías con la proyección deseada en un ámbito donde gran parte del equipo de desarrollo está enfocado en el desarrollo de aplicaciones móviles nativas. Sin profundizar en los motivos por los cuales se toma esta decisión se decide apostar por Flutter como tecnología Cross Platform única. A continuación, se describe qué es Flutter y una serie de lecciones aprendidas.

¿Qué es Flutter?

Es un framework open source desarrollado por el equipo de Google para construir aplicaciones multi-plataforma (Mobile, Web, Desktop, Embedded devices) partiendo desde un único código fuente. Un poco de historia en relación con las versiones y los hitos de su evolución:

 

Baja curva de aprendizaje

Flutter hace uso del lenguaje de programación Dart, un lenguaje creado por Google. Dart es un lenguaje particularmente sencillo de aprender, con una curva de aprendizaje sorprendentemente bastante rápida y con muchas similitudes con otros lenguajes de desarrollo nativo, como Swift o Kotlin, o incluso con JavaScript. Además, el diseño declarativo y programático de Dart es fácil de leer y visualizar.

La experiencia para los desarrolladores de Nativo ha sido muy satisfactoria en comparación con plataformas como Xamarin o React Native por comparar otras tecnologías cross platforms.

Gran cantidad de librerías

Flutter cuenta con una enorme cantidad de funcionalidades sin necesidad de añadir dependencias, aunque soporta el uso de paquetes desarrollados por terceros, de esta manera se acelera el proceso de desarrollo y se reduce la necesidad de programar funcionalidades especificas en nativo.

Existe una gran comunidad detrás de Flutter que contribuyen con paquetes con funcionalidad no existente en Flutter, incluso el propio equipo de Flutter aporta nueva funcionalidad no existente de forma original. Aunque en algunos casos se necesita configurar parámetros específicos de alguna de las plataformas, para lo que se requieren conocimientos en nativo.

En el caso de que no existiera la funcionalidad que estamos buscando, siempre existiría la posibilidad de programarla de forma nativa para cualquiera de las plataformas que soporta Flutter y utilizarla dentro de nuestro proyecto. Ejemplo: fácil uso de la librería de Firebase y StoryBook con documentación muy completa.

Interfaz visual

Amplio catálogo de widgets listos para usar con interfaces modernas y transiciones fluidas, lo cual ahorra más tiempo al desarrollador.

Se comportan y se ven naturales y uniformes en todas las plataformas y versiones; también es posible utilizar los estilos de cada plataforma (temas Cupertino y Material Design).

Adicionalmente se pueden crear propios (Widgets) muy fácilmente o modificar existentes. Para agilizar el desarrollo se recomienda crear una librería con todos los widgets core a reutilizar a lo largo del desarrollo trabajando en conjunto con el equipo de UX/UI para definir el UI KIT correspondiente.

Rendimiento

Con Dart, las aplicaciones se pueden compilar directamente en código máquina nativo, lo que significa que no hay necesidad de una máquina virtual o un bridge.

Usa su propio motor de renderizado, de forma que «pinta» directamente el componente (parecido a un motor de videojuegos).

Esto permite que Flutter consuma menos recursos del dispositivo, lo que se traduce en un mejor rendimiento y un inicio más rápido de las aplicaciones.

Comunidad de desarrolladores

Dart es un lenguaje de programación de nicho, no tan ampliamente usado como JavaScript, si bien su nivel de uso está creciendo exponencialmente ligado a la creciente popularidad de Flutter. Habitualmente, los desarrolladores Flutter también lo son o han sido desarrolladores nativos, por lo que suelen tener amplios conocimientos de movilidad.

Integración con desarrollo nativo

La incorporación de código Flutter en un proyecto nativo iOS/Android está planteada por el equipo de desarrollo de Flutter, Google, desde la perspectiva de una migración, en la que sobre una app nativa existente se añaden nuevas funcionalidades en Flutter y en migrar poco a poco su código existente para en un futuro tener una aplicación en Flutter 100% operativa que cumple todas las funcionalidades que cumplía la aplicación nativa.

De esta manera, la aplicación original, teniendo una estructura completamente nativa puede incorporar un módulo Flutter al que delega la navegación, visuales y lógica funcional en un momento determinado.

Esta forma de implementación tiene la limitación de que solo puede existir un módulo Flutter en la aplicación nativa, restringiendo también la forma en que se comparte información entre la parte nativa del código y el módulo Flutter.

Aconsejamos que el uso de un módulo Flutter en una aplicación nativa se acote a este planteamiento, en el que desde un momento de la navegación de la aplicación original se delega totalmente sobre el módulo Flutter el resto de la navegación, lógica funcional y recuperación de datos.

Una vez introducido Flutter a continuación se detallarán los mecanismos de integración que existen para que sea posible la comunicación entre un desarrollo Nativo y un desarrollo utilizando Flutter.

Platform Channels

Las aplicaciones nativas Android/iOS pueden comunicarse con Flutter a través de los canales de la plataforma de forma bidireccional utilizando el Method Channel y el Event Channel. Esto posibilita que el SDK de Flutter no se sobrecargue con funcionalidades, sino que estas puedan ser accedidas desde la plataforma host (Android/iOS). Por tanto, si bien Flutter no contempla el acceso directo a la batería, sensores, acelerómetro, sonido, conectividad, etc., estos pueden ser accedidos a partir de los canales de la plataforma.

Documentación oficial de flutter sobre platform channels.

Los mecanismos de integración y comunicación entre Flutter y Nativo son los siguientes:

Method Channel

Este canal define un método dentro del ambiente nativo y puede ser llamado desde Flutter, tal y como se aprecia en la siguiente figura. El method channel se utiliza para realizar una integración desde Flutter hacía Nativo (En la plataforma Nativa se define un método y desde Flutter se invoca al mismo.

Ejemplo implementación de un MethodChannel en Flutter:

import 'package:flutter/services.dart';
 
 const methodChannel = MethodChannel('com.example.flutterintegration/method');
 
    methodChannel.invokeMethod(
      'paramMethod',
      {'key': value},
    );

 

Event Channel

Este canal permite enviar información desde nativo hacia Flutter. Para ello, Flutter permanece escuchando cualquier evento que pueda surgir en la plataforma nativa para reaccionar al mismo de la forma que se defina.

Ejemplo implementación de un EventChannel en Flutter:

import 'package:flutter/services.dart';
 
    const eventChannel = EventChannel('com.example.flutterintegration/event');
    textStreamSubscription =
        eventChannel.receiveBroadcastStream().listen((event) {
      final _event = Map<String, String>.from(event);
      state = state.copyWith(
        route: _event[Constants.routeKey],
        text: _event[Constants.textKey],
      );
    });

 

Desde Flutter se escuchan los eventos que se lanzan desde la plataforma nativa.

Consideraciones

  • Módulo único (Android & iOS): No es posible crear más de un módulo para integrar Flutter a una aplicación nativa Android o iOS. Las diferentes funcionalidades deben ser manejadas dentro de un único módulo a través de los platform channels.
  • Necesario tener conocimientos de desarrollo nativo y de flutter para trabajar en la integración de ambas tecnologías.

Conclusiones claves de Flutter

  • El mejor rendimiento entre las cross-platforms e híbridas.
  • Interfaces de usuario modernas con animaciones fluidas.
  • Misma experiencia en todas las plataformas (es posible diferenciar). Total control de la UI.
  • Más joven, aunque ha crecido exponencialmente en popularidad y uso.
  • Para plataforma web es estable pero le falta madurez.
  • Framework enfocado para desarrolladores móviles nativos.

 

 

Tags

He leído y acepto la política de privacidad
Acepto recibir emails sobre actividades de recruiting NTT DATA