Render app inside custom html element

[lejard-h]

Have not found anything like that (yet).
Is it possible to render an app inside a custom html element, not on the body ?

Something similar to react

<div id="root"></div>

runApp(App(), root: '#root");

It could help integrating flutter widget into existing Angular Dart app

[yjbanov]

This should also enable developers publishing apps as web components.

[bratyslav]

If this is easier to do, than #32326 I would go for it
Like, you can have half of screen covered with

[Ephenodrom]

This would be really nice, for example if you use bootstrap for your website and want to add a flutter app under the boostrap navbar, so it will fit seamlessly inside your page. In this case the flutter app has to be rendered under the following html tag :

<div class="container">...</div>

[kleinpetr]

Is there some news about this feature?? How can I set root html element of app?

[yjbanov]

No progress yet. The only workaround we're aware of is to put the Flutter app in an iframe and communicate with the hosting page via Window.postMessage.

[leoafarias]

@yjbanov how would the flutter app get the values being sent even from within the iFrame?

[yjbanov]

@leoafarias Yes, the iframe would send the message using window.parent.postMessage (example).

[m9rc1n]

@yjbanov Is anyone working on it right now? A few weeks ago I implemented this for integration with Angular components and it worked quite well.

As this would be breaking change (I guess we can't use body anymore) - all examples would need to apply the change

[yjbanov]

@maszhin Nobody on the team is actively working on this.

[m9rc1n]

@yjbanov Thanks. I will send PR next week

[oantajames]

@maszhin any news in regards to the PR ? 😄

[yjbanov]

While we welcome pull requests, I'd like to give a heads-up that this may not be a small project. To implement this correctly we need to make sure all of the following work correctly between the non-Flutter host content and the hosted Flutter app:

• Gesture detection
• Accessibility
• Layout: we will likely have to measure the host page before rendering a Flutter frame because Flutter uses an open layout system. This needs to be done carefully to avoid performance issues.
• App lifecycle: how to properly control the launch and shut-down of a Flutter app.
• CSS encapsulation
• <meta name="viewport"> configuration that works across Flutter and non-Flutter content.

These are just first things that came to my mind.

[sudip4036]

Any update on this feature ? This will enable flutter web to integrate with other product effectively.

[meold]

Any update on this feature?

[Kishan-Kalburgi]

Hey team, we'll be happy to know if you have any estimated deadline to roll this feature out?

Thank you
Kishan

[yjbanov]

As of today there has been no progress on this.

@sudip4036 @meold @Kishan-Kalburgi Is there anything you'd like to be able to do by hosting on the same page that you are unable to do using an iframe?

[yhuriez]

As of today is there any documented workaround for using an iframe inside a js framework (Vuejs for example) ?
It's kind of hard to make the iframe work just by putting it inside some html template or component. Mainly because it seems the framework do some internal operations with other local js file (like the main.dart.js provided with the Flutter web build that cannot be loaded it seems).

Having an example of how to integrate this iframe within theses framework would greatly help.

[Y0geshsharma]

I tried with iframe but while you build the flutter web it creates a web socket so you which makes you build the project and use the web in some web server like express.. from there only I was able to access the iframe.
Now can anyone suggest the flutter equivalent for receiving data in iframe

[filiph]

I'd like to note that this scenario is one of the three noted on https://flutter.dev/web.

In this early stage of development, we envision the web version of Flutter being valuable in many scenarios. For example:

• [...]
• Embedded interactive content - Flutter provides a powerful environment for creating rich, data-centric components that can be easily hosted within an existing web page. Whether for data visualization, an online tool like a car configurator, or an embedded chart, Flutter can provide a productive development approach for embedded web content.
• [...]

I know the site says "envision", but still -- we might be setting expectations too high over there. Should we update it? cc @sfshaza2

[rodydavis]

For anyone that is curious here is how you can render a flutter app inside of a webpage.

https://github.com/rodydavis/flutter_web_component

[statop]

@ditman This seems to fail when a plugin uses the engine in its initializer

 Error: LateInitializationError: Field '_dimensionsProvider' has not been initialized.

For example, https://github.com/fluttercommunity/flutter_sms/blob/fb17e22c47e3538ffd0ace48bac81a6c78cf31d6/lib/flutter_sms_web.dart#L10

[statop]

also, is there a way to render to multiple elements? or just one

[ditman]

@statop why does the plugin need to do that? The bindings will be initialized by the engine at the right time. I've only seen that explicitly called in tests.

For now, only one element. Multiple elements is next in the roadmap.

[statop]

I agree, it's not ideal, it seems that plugin commented it out and never released a version with that change.

Thanks for the update on the roadmap.

edit - I did find that this works. I had to use bleeding edge master since it doesn't seem like the actual plumbing got into the last beta.

[ditman]

@statop thanks for giving this a shot! Indeed it's for now only in the master channel, but it'll eventually roll to the new stages (you can see when it lands in another channel by looking at the tags of the commit (I think!))

[bryanrideshark]

We maintain a very (very) large Angular application with 1400+ libraries of components.

We would like to make the migration to Flutter.

If Flutter could work natively with web-components, where individual widgets (not entire apps) could be exported as different Web Components, the migration to flutter would be seamless.

We'd need:

• Loading the flutter engine as an ES Module
• Ability to lazy-load the web-components exported by Flutter one at a time (as single ES Modules ideally)

If this was possible, we'd probably eventually migrating our entire application to Flutter.

[treeder]

@bryanrideshark might not want to use flutter if web components is your goal. Or if a web app is your goal in general. I'd check out https://lit.dev instead. Also a Google project.

[louisifn]

Does anyone have a working example of this as a Flutter web project, please? I am trying to deploy but am slightly confused by the design doc. I'd just love to see what a finished index.html looks like following this change and would love to understand how it can be deployed without utilising an iframe. Many thanks

[ditman]

@louisifn here's the source code of the Demo that was shown on stage in Flutter Forward:

https://github.com/flutter/samples/tree/main/experimental/element_embedding_demo

[sammy4gh]

@ditman please do you know when this feature will be stable?

[Gene-Dana]

@louisifn check out these !

Flutter Web Example Landing Page
https://flutter-web-example.netlify.app/#/
https://github.com/Team-Crushing-It/seamless

Custom-Embedded Flutter Rive Animation
https://continualcare.org/
https://github.com/Team-Crushing-It/animated_logo_continual_care

Web Admin Page for Hello Wine
https://hello-wine-admin.netlify.app/#/
https://github.com/Hello-Wine-Games/hello_wine_admin

[ditman]

@sammy4gh the feature as is now will show up in the next stable release. Stable releases happen once a quarter more or less.

[rpk98c]

Hey Gene, I notice it still steals all scroll events, just like when in an iFrame. Is that fixable now? The stealing of scroll is probably the biggest issue we have with Flutter in iFrames. Thanks,

…

On Wed, 22 Feb 2023 at 18:56, Gene ***@***.***> wrote: @louisifn <https://github.com/louisifn> check out these ! Flutter Web Example Landing Page https://flutter-web-example.netlify.app/#/ https://github.com/Team-Crushing-It/seamless Custom-Embedded Flutter Rive Animation https://continualcare.org/ https://github.com/Team-Crushing-It/animated_logo_continual_care Web Admin Page for Hello Wine https://hello-wine-admin.netlify.app/#/ https://github.com/Hello-Wine-Games/hello_wine_admin — Reply to this email directly, view it on GitHub <#32329 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAGTXCVJO7TOE4VXJCJ7STDWYZONPANCNFSM4HLTRQYQ> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[Gene-Dana]

@louisifn here's the source code of the Demo that was shown on stage in Flutter Forward:

https://github.com/flutter/samples/tree/main/experimental/element_embedding_demo

@rpk98c check out this ! and this !

https://dart.dev/tutorials/web/low-level-html/connect-dart-html

They solved it now

[Gene-Dana]

Does anyone have a working example of this as a Flutter web project, please? I am trying to deploy but am slightly confused by the design doc. I'd just love to see what a finished index.html looks like following this change and would love to understand how it can be deployed without utilising an iframe. Many thanks

Check out this: https://geneyllanes.super.site/tutorials/hosting-flutter-web-on-netlify-correctly

[louisifn]

@louisifn here's the source code of the Demo that was shown on stage in Flutter Forward:

https://github.com/flutter/samples/tree/main/experimental/element_embedding_demo

@ditman @Gene-Dana These are brilliant, thank you both for all your input. Fully brought my understanding into operation.

I did also attempt to stop Flutter from absorbing scroll events mentioned by @rpk98c and noticed how the element_embedding_demo does still absorb all scroll events. The only way I have been able to negate this problem so far is by catching all scroll events within the flutter embed and passing them back up to the parent. This works fine for mouse scroll events with a Listener listening to onPointerSignal. I was unable however to do this with mobile scroll events as onVerticalDragUpdates operates on all devices and interrupts other touch events - even with delta strength restrictions.

My other question is, have any of you been able to disable scroll events from an embedded flutter component or do you have any better workaround to this, as this particular solution is pretty hacky?

Many thanks.

[Gene-Dana]

noticed how the element_embedding_demo does still absorb all scroll events

Is this truly the case? I wonder if this is something you control outside of Flutter

@ditman is this truly the case?

[ditman]

@Gene-Dana yes, the way that you embed flutter doesn't change how it handles mouse events (other than attaching the listeners to slightly different parts of the DOM).

For now, we aren't handling well the case where flutter needs to scroll internally AND the external page needs to scroll.

It's a very similar problem to what an IFrameElement would have (except the browser can know when an iframe element has stopped scrolling, and can continue scrolling outside of it).

[rpk98c]

@ditman Without fixing the scroll issues what are the benefits of this over an iframe? I appreciate it's a little nicer but I was of the belief this would be addressing the long running complaints for Flutter absorbing scroll events when in an iFrame

#78216

[rpk98c]

For now, we aren't handling well the case where flutter needs to scroll internally AND the external page needs to scroll.

I would argue it's a bug even if the Flutter app doesn't need to scroll and only the web page needs to scroll. As soon as the mouse goes over the Flutter element you can no longer scroll the web page, making the whole site feel broken. For example, hover your mouse over a Flutter element (which does NOT have internal scrolling) and then use your scroll wheel to scroll the web page. The page doesn't scroll making the whole site feel broken as soon as a Flutter element exists on the page.

[ditman]

I would argue it's a bug even if the Flutter app doesn't need to scroll and only the web page needs to scroll.

@rpk98c No need to argue, it's a bug. It's also not trivial to fix.

My hunch is that we'll need the framework to tell the engine that the user is hovering over something that may/may not be scrollable of an app, and then use that on the engine to turn on/off the scroll event handler, but I don't even know how feasible my solution is (or how performant).

While I was experimenting with the new embedding, I tried letting 30% of the scroll events unhandled around here, I think, and scroll would "work" (only at 30% of the normal rate, of course), so I guess that's a clue.

I'm not an expert in mouse bindings, so take my opinion with a bunch of grains of salt.

[bryanrideshark]

The whole point of using web components in flutter, is to allow the strangler vine refactoring pattern to be used.

You can't shift a project with 1000 components to Flutter all at once. But if you could convert a single web component at a time, then you could do it.

We'd love to adopt flutter - but we're not going to take our product offline for two years to do a complete rewrite. Nor is any other sensible SAAS platform.

[Gene-Dana]

but we're not going to take our product offline for two years to do a complete rewrite.

I'm not sure I understand your problem right now. How are embeddable widgets not a valid solution?

[Gene-Dana]

Without fixing the scroll issues what are the benefits of this over an iframe? I appreciate it's a little nicer but I was of the belief this would be addressing the long running complaints for Flutter absorbing scroll events when in an iFrame

Check out this !

https://github.com/flutter/packages/tree/main/packages/pointer_interceptor

From this comment
#72273 (comment)

[ditman]

(Replying to this comment)

@bryanrideshark you're not the first person to ask for those features, (at least another person asked for the same in our Discord. Also: #121417)

I have written a small doc on how I see Flutter realistically inter-operating with ES Modules:

• https://flutter.dev/go/web-declarative-bootstrap

I think that where our communication breaks down is on the definition of "Widget" or component.

If you're suggesting that all Flutter widgets are exposed as individual ES Modules; for example, the: Scaffold widget in a way that you can mix-and-match with your app (for example: make a Flutter Scaffold that has a body made of Angular stuff: I don't think this is doable! Flutter widgets do not map to HTML elements/Web components in the same way other html-based frameworks do.

If you want to replace some part of your app by a Flutter re-implementation of a widget that you have running in mobile (and you want to look and feel the same in the web), you should be able to. In this case I'm imagining a web component that has some complex behavior within it.

Anyway, let me /cc @kevmoo so he's aware of your use case, as I said, you're not the one to request this!

[ditman]

@Gene-Dana I don't think the pointer interceptor is going to be enough (I'm assuming that @rpk98c wants their Flutter app to be somewhat interactive :))

My current thinking is that the framework needs to tell the engine "the user is hovering over something: scrollable to top/scrollable to bottom/scrollable to both/not scrollable", and then the engine use that information to handle/ignore scroll events coming from the browser.

It's not going to feel 100% native but at least, we wouldn't be trapping people attempting to scroll OUT of a Flutter app in a tall page :)

[rpk98c]

@ditman You're spot on. Something so we can interact with the Flutter app but inside flutter decide when we're handing vertical scroll events and if we're not let the page handle them. It would be amazing to just have Flutter apps where we said no to vertical scrolling and allowed all other interaction, that would be a big win. At least then we could use Flutter to embed say a calculator widget and not block all page scrolling if hovered over it.

@Gene-Dana Thanks - we do use the pointer-interceptor extensively. It's very useful when embedding an iFrame in a native app and you want to have Flutter widgets over the top. E.g. a FAB. Great package.

[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.