Flutter Embedding
To embed a flutter app into your jaspr website you need the following setup:
- Add
jaspr_flutter_embed
as a dependency:dart pub add 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
- Add
uses-flutter: true
to your jaspr config insidepubspec.yaml
:
jaspr:
uses-flutter: true
Next 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 your flutter app widget
app: 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',
),
// provide an optional loader component that will be displayed while the flutter app loads
loader: MyCustomLoader(),
);
}
}
Finally, run your jaspr app as normal using jaspr serve
or jaspr build
.
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.
TODO: Elaborate and add example snippet.