🖼️ Flutter Embedding

To embed a flutter app into your jaspr website you need the following setup:

1. Add jaspr_flutter_embed as a dependency: dart pub add jaspr_flutter_embed
2. Replace build_web_compilers with jaspr_web_compilers as a dev dependency: dart pub remove build_web_compilers dart pub add jaspr_web_compilers --dev
3. Add uses-flutter: true to your jaspr config inside pubspec.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.