Añadir Flutter a una aplicación existente

Si estás escribiendo una nueva aplicación desde cero, es fácil comenzar usando Flutter. Pero, ¿qué pasa si ya tienes una aplicación que no está escrita en Flutter y no es práctico empezar de cero?

Para esas situaciones, Flutter se puede integrar en tu aplicación existente de forma gradual, como un módulo. Esta característica se conoce como "add-to-app". El módulo se puede importar en tu aplicación existente para renderizar parte de tu aplicación usando Flutter, mientras que el resto se puede renderizar usando la tecnología existente. Este método también se puede usar para ejecutar lógica compartida que no sea de UI, aprovechando la portabilidad de Dart y su interoperabilidad con otros lenguajes.

Add-to-app está soportado actualmente en Android, iOS, macOS y web.

Flutter soporta dos variantes de add-to-app:

• Multi-engine: soportado en Android, iOS y macOS, permite ejecutar una o más instancias de Flutter, cada una renderizando un widget embebido en la aplicación anfitriona. Cada instancia es un programa Dart independiente, que se ejecuta de forma aislada de otros programas. Tener múltiples instancias de Flutter permite que cada una mantenga un estado de aplicación y de UI independiente mientras se utilizan mínimos recursos de memoria. Consulta más en la página de múltiples Flutters.
• Multi-view: soportado en la web, permite crear múltiples FlutterViews, cada uno renderizando un widget embebido en la aplicación anfitriona. En este modo solo hay un programa Dart y todas las vistas y widgets pueden compartir objetos.

Add-to-app admite la integración de múltiples vistas de Flutter de cualquier tamaño, lo que da soporte a varios casos de uso. Dos de los casos de uso más comunes son:

• Pilas de navegación híbridas: una aplicación está compuesta por múltiples pantallas, algunas de las cuales son renderizadas por Flutter y otras por otro framework. El usuario puede navegar de una pantalla a otra libremente, sin importar qué framework se utilice para renderizar la pantalla.
• Vistas de pantalla parcial: una pantalla en la aplicación renderiza múltiples widgets, algunos de los cuales son renderizados por Flutter y otros por otro framework. El usuario puede desplazarse e interactuar con cualquier widget libremente, sin importar qué framework se utilice para renderizar el widget.

• Compila e importa automáticamente el módulo Flutter añadiendo un hook del SDK de Flutter a tu script de Gradle.
• Compila tu módulo Flutter en un Android Archive (AAR) genérico para su integración en tu propio sistema de compilación y para una mejor interoperabilidad de Jetifier con AndroidX.
• API de FlutterEngine para iniciar y persistir tu entorno Flutter de forma independiente a la vinculación de un FlutterActivity/FlutterFragment etc.
• Asistente de creación/importación de módulos y coedición de Android/Flutter en Android Studio.
• Se admiten aplicaciones anfitrionas en Java y Kotlin.
• Los módulos Flutter pueden usar plugins de Flutter para interactuar con la plataforma.
• Soporte para la depuración de Flutter y Hot Reload stateful mediante el uso de flutter attach desde IDEs o la línea de comandos para conectarse a una aplicación que contiene Flutter.

• Compila tu módulo Flutter en un paquete Swift para su integración en tu propio sistema de compilación.
• Compilar e importar automáticamente el módulo Flutter utilizando las fases de compilación de Xcode.
• API de FlutterEngine para iniciar y persistir tu entorno Flutter de forma independiente a la vinculación de un FlutterViewController.
• Se admiten aplicaciones anfitrionas en Objective-C y Swift.
• Los módulos Flutter pueden usar plugins de Flutter para interactuar con la plataforma.
• Soporte para la depuración de Flutter y Hot Reload stateful mediante el uso de flutter attach desde IDEs o la línea de comandos para conectarse a una aplicación que contiene Flutter.

Consulta nuestro repositorio de ejemplos de add-to-app en GitHub para ver proyectos de ejemplo en Android y iOS que importan un módulo Flutter para la UI.

• Compila tu módulo Flutter en un paquete Swift para su integración en tu propio sistema de compilación.
• Compilar e importar automáticamente el módulo Flutter utilizando las fases de compilación de Xcode.
• API de FlutterEngine para iniciar y persistir tu entorno Flutter de forma independiente a la vinculación de un FlutterViewController.
• Se admiten aplicaciones anfitrionas en Swift.
• Los módulos Flutter pueden usar plugins de Flutter para interactuar con la plataforma.
• Soporte para la depuración de Flutter y Hot Reload stateful mediante el uso de flutter attach desde IDEs o la línea de comandos para conectarse a una aplicación que contiene Flutter.

Flutter se puede añadir a cualquier aplicación web existente basada en el DOM de HTML escrita en cualquier framework web de Dart del lado del cliente (jaspr, ngdart, over_react, etc.), any client-side JS framework (React, Angular, Vue.js, etc.), cualquier framework renderizado en el servidor (Django, Ruby on Rails, Apache Struts, etc.), o incluso sin ningún framework (conocido cariñosamente como "VanillaJS"). El único requisito mínimo es que tu aplicación existente y su framework admitan la importación de bibliotecas de JavaScript y la creación de elementos HTML en los que Flutter pueda realizar el renderizado.

Para añadir Flutter a una aplicación existente, compílala normalmente y luego sigue las instrucciones de embebido para colocar vistas de Flutter en la página.

Para comenzar, consulta nuestra guía de integración de proyectos para Android, web, iOS y macOS:

Una vez que Flutter esté integrado en tu proyecto, consulta nuestras guías de uso de la API en los siguientes enlaces:

Limitaciones en móviles:

• El modo multi-view no está soportado (solo multi-engine).
• No se admite empaquetar múltiples bibliotecas de Flutter en una aplicación.
• Los plugins que no soportan FlutterPlugin podrían tener comportamientos inesperados si hacen suposiciones que son insostenibles en add-to-app (como asumir que una Activity de Flutter siempre está presente).
• En Android, el módulo Flutter solo soporta aplicaciones AndroidX.

Limitaciones en web:

• El modo multi-engine no está soportado (solo multi-view).
• No hay forma de "apagar" completamente el motor de Flutter. La aplicación puede eliminar todos los objetos FlutterView y asegurarse de que todos los datos sean recolectados por el recolector de basura utilizando los conceptos normales de Dart. Sin embargo, el motor permanecerá preparado, incluso si no está renderizando nada.