Flutter Add-to-App: Embedding Flutter in Native Apps

WHY IT EXISTS Rewriting a large, mature native application from scratch is often too risky and expensive. Add-to-App provides a path for gradual adoption, allowing teams to leverage Flutter for new features or modules within an existing Android or iOS codebase, de-risking a full migration.

THE MENTAL MODEL Treat Add-to-App like embedding a specialized, high-performance virtual machine (the Flutter engine) into your native app. Your native code is the "host" and it can launch "guest" screens or components written in Flutter. This is not a simple view; it is a complete rendering engine running its own Dart code, sandboxed from the native UI thread.

HOW IT WORKS You create a Flutter project as a "module". Your existing native Android or iOS app then adds this module as a dependency. To show a Flutter screen, the native app instantiates and presents a FlutterViewController on iOS or a FlutterActivity/FlutterFragment on Android. Communication for passing data or triggering events between the native and Flutter worlds happens over asynchronous "platform channels".

WHEN TO USE IT Use this for a phased migration of a large native app to Flutter. It's also ideal for building a single complex feature that needs to be shared across both iOS and Android but where a full app rewrite is not feasible. It lets you prove Flutter's value on a smaller scale before committing to a full rewrite.

WHEN NOT TO USE IT Avoid this for greenfield projects; start with a pure Flutter app instead. It's also overkill for very simple UI that can be easily built natively. Teams without any native development experience will struggle, as you are still responsible for maintaining and building the native host application.

ONE CANONICAL EXAMPLE An established banking app, written natively, wants to add a new "Financial Goals" feature. Instead of writing the UI twice (once in Swift/UIKit, once in Kotlin/XML), they use Add-to-App. They build the entire feature as a Flutter module. When a user taps the "Goals" button in the native app, it launches a full-screen Flutter view to manage their financial goals, which communicates back to the native app's services via platform channels.