🖼️ 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.