[web] Multi-view Embedding Support

[ditman]

Get the code ready to support the multi-view embedding feature. Some changes:

• Accept a hostElements array in the Engine configuration
• Refactor the current View Embedder so it's not a singleton anymore.
  • Each View should know how to embed itself, or have an Embedding Strategy associated with it. See this doc.

There's multiple assumptions made in the current view embedder that only one view is going to exist at a time (like the addSceneToSceneHost method, which need to be delegated to each view implementation).

For simplicity, the new design should be something similar to:

• The platform_dispatcher continues being a singleton that coordinates the engine (in the future, this should be an actual object that gets instantiated).
  • The platform_dispatcher contains a Map<ViewId, View> where all the views are cached for access later.
  • The platform_dispatcher can initialize new Views depending on their configuration (create the appropriate DOM structure for the view, create the view itself), and cache it in the view cache.
  • The platform_dispatcher should receive a view Id for every view "operation".
    • Operations should fetch a view by its id, and operate on it, rather than delegate it to the view_embedder. Look how the current implementation of render ignores the passed-in view.

Most of the above should be implementable in the current state of the engine, without having to wait for the full-blown multi-view setup (at least, to make it work in single-view with the refactored multi-view architecture).

[ditman]

Related: #122850

[yjbanov]

First milestone could be: we have an engine test that creates two FlutterView instances and renders a Scene into each. This way we don't have a dependency on the framework's multi-view support while making progress on the web engine side.

[NashIlli]

Any updates about this?

[ditman]

@NashIlli it's WIP.

[leoxagy12]

This would be extremely useful. I was thinking of using flutter for improving pieces of a legacy web app but the limitation of one single embedded component forbids continuing with this idea for the moment. Hope this gets completed soon as it will open many doors for flutter.

[ditman]

@leoxagy12 it's WIP, but lots of work to do. Here's an old-ish demo.

[sjthn]

Hi @ditman , will this enable us to show the required flutter widget(s) on the screen without the need to wrap it with a runApp?

Asking this as I have a usecase to show a flutter widget in a 3rd party webpage that can use any web framework. So we were thinking if a widget alone can be exposed from that flutter module that is already used by the flutter app.

[ditman]

So we were thinking if a widget alone can be exposed from that flutter module that is already used by the flutter app.

@sjthn No, you won't be able to export a widget from a Flutter Web app.

You'll be able to have a flutter web app running, possibly rendering nothing, that knows how to fill in certain "divs" with whatever widget you want. This is controlled from your Flutter app.

You can render as many divs as you want from Flutter with a single runApp (my demo app above only has one runApp, but it can render to as many divs as needed)

[p-mazhnik]

Here are React demos inspired by @ditman's demo if anyone is interested:
https://p-mazhnik.github.io/flutter-embedding/expo-multiview/
https://p-mazhnik.github.io/flutter-embedding/react-multiview/

[yjbanov]

This is done.

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.