Flutter Embedding
Embedding a Flutter web app in a Jaspr website.
Requires Flutter 3.24.0 or newer.
To embed a Flutter app into your Jaspr website you need the following setup:
Add
flutter
andjaspr_flutter_embed
as dependencies:dart pub add flutter jaspr_flutter_embed
Replace
build_web_compilers
withjaspr_web_compilers
as a dev dependency:dart pub remove build_web_compilers dart pub add jaspr_web_compilers --dev
Create the file
web/flutter_bootstrap.js
with the following content:{{flutter_js}} {{flutter_build_config}}
Add the
FlutterEmbedView
component to your jaspr app like this:import 'package:jaspr_flutter_embed/jaspr_flutter_embed.dart'; // import your flutter app widget import 'my_flutter_app.dart'; // this can be any jaspr component class JasprApp extends StatelessComponent { JasprApp({super.key}); Iterable<Component> build(BuildContext context) sync* { // this is a normal jaspr component yield FlutterEmbedView( // provide an optional loader component that will be displayed while the flutter app loads loader: MyCustomLoader(), // provide your flutter app widget widget: MyFlutterApp( // provide any widget properties or callbacks // this way you can pass and share state between jaspr and flutter // without needing js interop title: 'My Embedded Flutter App', ), ); } }
Finally, run your jaspr app as normal using
jaspr serve
orjaspr build
.
See the documentation of FlutterEmbedView for a description of all available properties.
Deferred loading
The jaspr_flutter_embed
package itself uses deferred imports internally to optimize the loading of the flutter framework.
To make optimal use of lazy loading the flutter framework, you should use the FlutterEmbedView.deferred() constructor.
With this the flutter framework will automatically be lazy-loaded when rendering a FlutterEmbedView
for the first time.
As a further optimization, it is also possible to preload the flutter framework by calling FlutterEmbedView.preload()
.
Import handling
Any code and components that use the flutter sdk can only be imported on the client, not the server. That means that when you use server-side rendering, you cannot directly import the above component into your app, or you will get a compilation error.
Instead, you need to use Darts conditional imports to only import the affected code on the client. See @Import.