Saltar al contenido principal

Múltiples pantallas o vistas de Flutter

Cómo integrar múltiples instancias del motor, pantallas o vistas de Flutter en tu aplicación.

Escenarios

#

Si estás integrando Flutter en una aplicación existente, o migrando gradualmente una aplicación existente para usar Flutter, es posible que desees añadir múltiples instancias de Flutter al mismo proyecto. En particular, esto puede ser útil en los siguientes escenarios:

  • Una aplicación donde la pantalla de Flutter integrada no sea un nodo hoja de la navegación, y la pila de navegación pueda ser una mezcla híbrida de nativo -> Flutter -> nativo -> Flutter.
  • Una pantalla donde múltiples vistas parciales de Flutter puedan estar integradas y ser visibles a la vez.

La ventaja de utilizar múltiples instancias de Flutter es que cada instancia es independiente y mantiene su propia pila de navegación interna, UI y estados de la aplicación. Esto simplifica la responsabilidad del código general de la aplicación para el mantenimiento del estado y mejora la modularidad. Se pueden encontrar más detalles sobre los escenarios que motivan el uso de múltiples instancias de Flutter en flutter.dev/go/multiple-flutters.

Flutter está optimizado para este escenario, con un bajo coste de memoria incremental (~180kB) para añadir instancias adicionales de Flutter. Esta reducción del coste fijo permite que el patrón de múltiples instancias de Flutter se utilice con mayor libertad en tu integración add-to-app.

Componentes

#

La API principal para añadir múltiples instancias de Flutter tanto en Android como en iOS se basa en una nueva clase FlutterEngineGroup (API de Android, API de iOS) para construir FlutterEngines, en lugar de los constructores de FlutterEngine utilizados anteriormente.

Mientras que la API de FlutterEngine era directa y más fácil de consumir, los FlutterEngine creados a partir del mismo FlutterEngineGroup tienen la ventaja de rendimiento de compartir muchos de los recursos comunes y reutilizables, como el contexto de la GPU, las métricas de fuentes y la instantánea del grupo de isolates (isolate group snapshot), lo que conduce a una latencia de renderizado inicial más rápida y un menor consumo de memoria.

  • Los FlutterEngine creados a partir de FlutterEngineGroup se pueden utilizar para conectarse a clases de UI como FlutterActivity o FlutterViewController de la misma manera que los FlutterEngine en caché construidos normalmente.

  • El primer FlutterEngine creado a partir del FlutterEngineGroup no necesita seguir existiendo para que los FlutterEngine posteriores compartan recursos, siempre y cuando haya al menos 1 FlutterEngine activo en todo momento.

  • La creación del primer FlutterEngine a partir de un FlutterEngineGroup tiene las mismas características de rendimiento que tenía la construcción de un FlutterEngine utilizando los constructores anteriormente.

  • Cuando se destruyen todos los FlutterEngines de un FlutterEngineGroup, el siguiente FlutterEngine creado tiene las mismas características de rendimiento que el primer motor.

  • El propio FlutterEngineGroup no necesita seguir existiendo más allá de todos los motores generados. Destruir el FlutterEngineGroup no afecta a los FlutterEngines generados existentes, pero elimina la posibilidad de generar FlutterEngines adicionales que compartan recursos con los motores generados existentes.

Comunicación

#

La comunicación entre las instancias de Flutter se gestiona mediante canales de plataforma (o Pigeon) a través de la plataforma anfitriona. Para ver nuestra hoja de ruta sobre comunicación, u otro trabajo planificado para mejorar el soporte de múltiples instancias de Flutter, consulta la Issue 72009.

Ejemplos

#

Puedes encontrar un ejemplo que demuestra cómo utilizar FlutterEngineGroup tanto en Android como en iOS en GitHub.

Un ejemplo que demuestra múltiples instancias de Flutter