---
title: FlutterEmbedView
description: Embed a flutter app in your Jaspr side.
---

---

<Info>
This component is part of the `jaspr_flutter_embed` package. Make sure to add this to your dependencies
before using the component.
</Info>

<Warning>
Requires Flutter 3.24.0 or newer.
</Warning>

With the `FlutterEmbedView` component you can embed any Flutter widget as part of your
Jaspr component tree. The component takes care of initializing the Flutter engine and attaching the provided widget
to the root of Flutters widget tree. It internally calls Flutters `runApp` method with the provided widget.

It renders a `<div></div>` element and mounts the flutter app inside.

## Usage

You can provide the following parameters:

- `id`: Optional id for the created `<div>` element.
- `classes`: Optional class name for the created `<div>` element.
- `styles`: Optional styles for the created `<div>` element.
- `constraints`: Optional view constraints for the flutter view.
- `loader`: An optional component that is displayed while the flutter app is initializing.
- `widget`: The widget that will be run as your embedded Flutter app.

```dart
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',
  ),
);
```

## Deferred variant

The `FlutterEmbedView` is designed to be used with **deferred imports**. This will help making your bundle size smaller
and the loading of your site faster.

To make full use of the optimal bundle splitting, place your app widget in a separate library and deferred import it.
Then you can use the `FlutterEmbedView.deferred()` constructor like this:

```dart
import 'package:jaspr_flutter_embed/jaspr_flutter_embed.dart';
import 'widgets/my_app.dart' deferred as app;

/* ... */

yield FlutterEmbedView.deferred(
  /* ... */
  loadLibrary: app.loadLibrary(),
  builder: () => app.MyFlutterApp(),
);
```

---

<Info>
Read more about Jasprs support for [Flutter Embedding](/going_further/flutter_embedding).
</Info>
