Add Flutter to an existing app

If you are writing a new application from scratch, it is easy to get started using Flutter. But what if you already have an app that's not written in Flutter, and it's impractical to start from scratch?

For those situations, Flutter can be integrated into your existing application piecemeal, as a module. This feature is known as "add-to-app". The module can be imported into your existing app to render part of your app using Flutter, while the rest can be rendered using existing technology. This method can also be used to run shared non-UI logic by taking advantage of Dart's portability and interopability with other languages.

Add-to-app is currently supported on Android, iOS, and web.

Flutter supports two flavors of add-to-app:

• Multi-engine: supported on Android and iOS, allows running one or more instances of Flutter, each rendering a widget embedded into the host application. Each instance is a separate Dart program, running in isolation from other programs. Having multiple Flutter instances allows each instance to maintain independent application and UI state while using minimal memory resources. See more in the multiple Flutters page.
• Multi-view: supported on the web, allows creating multiple FlutterViews, each rendering a widget embedded into the host application. In this mode there's only one Dart program and all views and widgets can share objects.

Add-to-app supports integrating multiple Flutter views of any size, supporting various use-cases. Two of the most common use-cases are:

• Hybrid navigation stacks: an app is made of multiple screens, some of which are rendered by Flutter, and others by another framework. The user can navigate from one screen to another freely, no matter which framework is used to render the screen.
• Partial-screen views: a screen in the app renders multiple widgets, some of which are rendered by Flutter, and others by another framework. The user can scroll and interact with any widget freely, no matter which framework is used to render the widget.

• Auto-build and import the Flutter module by adding a Flutter SDK hook to your Gradle script.
• Build your Flutter module into a generic Android Archive (AAR) for integration into your own build system and for better Jetifier interoperability with AndroidX.
• FlutterEngine API for starting and persisting your Flutter environment independently of attaching a FlutterActivity/FlutterFragment etc.
• Android Studio Android/Flutter co-editing and module creation/import wizard.
• Java and Kotlin host apps are supported.
• Flutter modules can use Flutter plugins to interact with the platform.
• Support for Flutter debugging and stateful hot reload by using flutter attach from IDEs or the command line to connect to an app that contains Flutter.

• Auto-build and import the Flutter module by adding a Flutter SDK hook to your CocoaPods and to your Xcode build phase.
• Build your Flutter module into a generic iOS Framework for integration into your own build system.
• FlutterEngine API for starting and persisting your Flutter environment independently of attaching a FlutterViewController.
• Objective-C and Swift host apps supported.
• Flutter modules can use Flutter plugins to interact with the platform.
• Support for Flutter debugging and stateful hot reload by using flutter attach from IDEs or the command line to connect to an app that contains Flutter.

See our add-to-app GitHub Samples repository for sample projects in Android and iOS that import a Flutter module for UI.

Flutter can be added to any existing HTML DOM-based web app written in any client-side Dart web framework (jaspr, ngdart, over_react, etc), any client-side JS framework (React, Angular, Vue.js, etc), any server-side rendered framework (Django, Ruby on Rails, Apache Struts, etc), or even no framework (affectionately known as "VanillaJS"). The minimum requirement is only that your existing application and its framework support importing JavaScript libraries, and creating HTML elements for Flutter to render into.

To add Flutter to an existing app, build it normally, then follow the embedding instructions for putting Flutter views onto the page.

To get started, see our project integration guide for Android and iOS:

After Flutter is integrated into your project, see our API usage guides at the following links:

Mobile limitations:

• Multi-view mode is not supported (multi-engine only).
• Packing multiple Flutter libraries into an application isn't supported.
• Plugins that don't support FlutterPlugin might have unexpected behaviors if they make assumptions that are untenable in add-to-app (such as assuming that a Flutter Activity is always present).
• On Android, the Flutter module only supports AndroidX applications.

Web limitations:

• Multi-engine mode is not supported (multi-view only).
• There's no way to completely "shutdown" the Flutter engine. The app can remove all the FlutterView objects and make sure all data is garbage collected using normal Dart concepts. However, the engine will remain warmed up, even if it's not rendering anything.

Unless stated otherwise, the documentation on this site reflects the latest stable version of Flutter. Page last updated on 2024-08-20. View source or report an issue.