Skip to content

Commit

Permalink
document add-to-app for web (#11056)
Browse files Browse the repository at this point in the history
_Description of what this PR is changing or adding, and why:_

The web supports add-to-app via multi-view. This PR updates the
add-to-app docs to include web. I also attempt to improve some existing
text.
  • Loading branch information
yjbanov authored Aug 19, 2024
1 parent 7dc1d1c commit cd3f109
Showing 1 changed file with 79 additions and 16 deletions.
95 changes: 79 additions & 16 deletions src/content/add-to-app/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,26 +6,37 @@ description: Adding Flutter as a library to an existing Android or iOS app.

## Add-to-app

It's sometimes not practical to rewrite your entire application in
Flutter all at once. For those situations,
Flutter can be integrated into your existing
application piecemeal, as a library or module.
That module can then be imported into your Android or iOS
(currently supported platforms) app to render a part of your
app's UI in Flutter. Or, just to run shared Dart logic.

In a few steps, you can bring the productivity and the expressiveness of
Flutter into your own app.

The `add-to-app` feature supports integrating multiple instances of any screen size.
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 not practical 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
[FlutterView][]s, 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 instances of any screen size.
This can help scenarios such as a hybrid navigation stack with mixed
native and Flutter screens, or a page with multiple partial-screen Flutter
views.

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.

## Supported features

### Add to Android applications
Expand Down Expand Up @@ -72,6 +83,32 @@ See our [add-to-app GitHub Samples repository][]
for sample projects in Android and iOS that import
a Flutter module for UI.

### Add to web applications

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.

[jaspr]: https://pub.dev/packages/jaspr
[ngdart]: https://pub.dev/packages/ngdart
[over_react]: https://pub.dev/packages/over_react
[React]: https://react.dev/
[Angular]: https://angular.dev/
[Vue.js]: https://vuejs.org/
[Django]: https://www.djangoproject.com/
[Ruby on Rails]: https://rubyonrails.org/
[Apache Struts]: https://struts.apache.org/
[VanillaJS]: http://vanilla-js.com/
[embedding instructions]: {{site.docs}}/platform-integration/web/embedding-flutter-web#embedded-mode

## Get started

To get started, see our project integration guide for
Expand All @@ -92,6 +129,13 @@ Android and iOS:
</header>
</div>
</a>
<a class="card" href="/platform-integration/web/embedding-flutter-web#embedded-mode">
<div class="card-body">
<header class="card-title text-center">
Web
</header>
</div>
</a>
</div>

## API usage
Expand All @@ -114,17 +158,35 @@ see our API usage guides at the following links:
</header>
</div>
</a>
<a class="card" href="/platform-integration/web/embedding-flutter-web#manage-flutter-views-from-js">
<div class="card-body">
<header class="card-title text-center">
Web
</header>
</div>
</a>
</div>

## Limitations

Mobile limitations:

* 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.
* 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.

[get started]: /get-started/codelab
[add-to-app GitHub Samples repository]: {{site.repo.samples}}/tree/main/add_to_app
[Android Archive (AAR)]: {{site.android-dev}}/studio/projects/android-library
[Flutter plugins]: {{site.pub}}/flutter
Expand All @@ -138,3 +200,4 @@ see our API usage guides at the following links:
[iOS Framework]: {{site.apple-dev}}/library/archive/documentation/MacOSX/Conceptual/BPFrameworks/Concepts/WhatAreFrameworks.html
[maintained by the Flutter team]: {{site.repo.packages}}/tree/main/packages
[multiple Flutters]: /add-to-app/multiple-flutters
[FlutterView]: https://api.flutter.dev/flutter/dart-ui/FlutterView-class.html

0 comments on commit cd3f109

Please sign in to comment.