Using multiple "flutter apps" inside a page using Element Embedding

[eduardo-pellenz]

Use case

I'm currently writing a chart library for the company that I work for. After some research, we didn't find a good package that have the features that we want. So our decision was to write our own.

We have both an web app and app (React and Flutter). And with the Element Embedding feature we want to reuse this package for both platforms.

After some tests using the master branch, there was two things that I found that would be really cool to add/improve (don't actually know if it's on your roadmap already)

Proposal / Questions

I wasn't able to create two instances of the app. Is there or will be a way to create multiple instances of the app in a page? This is the code that I have used.

const initChart = (targetSelector) => {
  let target = document.querySelector(targetSelector);
  _flutter.loader.loadEntrypoint({
    onEntrypointLoaded: async function (engineInitializer) {
      let appRunner = await engineInitializer.initializeEngine({
        hostElement: target,
      });
      await appRunner.runApp();
    },
  });
}

window.addEventListener("load", function (ev) {
  initChart('#flutter_target');
  initChart('#flutter_target_2');
});

With this code, the first app is stopped and the second one works.

Will be there a way to export single widgets instead of having to export the whole app?

Using the current way, it's possible to achieve what I want using a wrapper around the _flutter.loader.loadEntrypoint and calling the state methods to update the state. But will be there a better way to do that?

[huycozy]

Hi @eduardo-pellenz
There is a related document about this (Astral Projections for Flutter Web). And it seems the multi-screen Flutter web app hasn't been supported yet.

Labeling the issue as a proposal for more infights.

cc @ditman for thoughts.

[ditman]

For now:

Is there or will be a way to create multiple instances of the app in a page?

We cannot have multiple instances of a Flutter app in the same page. Flutter web is using some window globals to keep its state that can get messed up if multiple flutter engines write on them. This needs fixing by the flutter engine. I don't have an ETA for this.

Will be there a way to export single widgets instead of having to export the whole app?

Not really. I don't see a future where you're going to be able to do: import flutter/Scaffolding from main.dart.js and use that in your JS. Similarly to how you wouldn't import a single ReactJS component outside of a ReactJS app?

The next steps for this are to support multiple "screens" in Flutter web as different elements on the page, so I guess you could have some divs that "only render one widget" as a proxy for exporting single widgets, or running multiple instances of the app.

(Something very similar to this was discussed in our Discord recently, check it out!)

@eduardo-pellenz I wanted to thank you for creating this issue. We're attempting to build this in a way where users are more involved, and all these doubts, feature requests and "I think this'd work X way but it does Y" posts help very much! Keep it up!

[jacobsimionato]

The inability to have multiple separate Flutter instances coexist in the same app is a potential problem when using Flutter to implement a shared library on the web, as there could be other Flutter-based libraries that already exist in the page. This affects potential internal Google clients too.