Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Render app inside custom html element #32329

Open
lejard-h opened this issue May 8, 2019 · 12 comments

Comments

@lejard-h
Copy link

commented May 8, 2019

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 comment has been minimized.

Copy link
Contributor

commented May 9, 2019

This should also enable developers publishing apps as web components.

@bratyslav

This comment has been minimized.

Copy link

commented Jun 18, 2019

If this is easier to do, than #32326 I would go for it
Like, you can have half of screen covered with tag and another one with flutter
Or put as background, and make flutter view transparent

@Ephenodrom

This comment has been minimized.

Copy link

commented Aug 23, 2019

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

This comment has been minimized.

Copy link

commented Aug 25, 2019

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

@yjbanov

This comment has been minimized.

Copy link
Contributor

commented Sep 4, 2019

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

This comment has been minimized.

Copy link

commented Sep 12, 2019

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

@yjbanov

This comment has been minimized.

Copy link
Contributor

commented Sep 12, 2019

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

@maszhin

This comment has been minimized.

Copy link
Contributor

commented Sep 27, 2019

@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

This comment has been minimized.

Copy link
Contributor

commented Sep 27, 2019

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

@maszhin

This comment has been minimized.

Copy link
Contributor

commented Sep 28, 2019

@yjbanov Thanks. I will send PR next week

@oantajames

This comment has been minimized.

Copy link

commented Oct 7, 2019

@maszhin any news in regards to the PR ? 😄

@yjbanov

This comment has been minimized.

Copy link
Contributor

commented Oct 7, 2019

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
9 participants
You can’t perform that action at this time.