Element Embedding in Flutter

Aseem Wangoo
Flutter Community
Published in
9 min readMar 3, 2023

--

Element Embedding in Flutter

We will cover briefly:

  1. What’s Element Embedding
  2. Embed Counter App in HTML webpage

What’s Element Embedding

The Flutter Forward event, which was broadcasted from Nairobi, Kenya, discussed Flutter’s future plans.

The team presented a sneak peek at the upcoming wave of investments in Flutter at this event, including early support for cutting-edge graphics performance, seamless integration for web and mobile, and early support for new and emerging architectures.

One such feature the team previewed was Element Embedding. This allows Flutter content to be added to any standard web <div> When integrated in this manner, Flutter merely turns into a web component, integrating seamlessly with the web DOM and even allowing the styling of the parent Flutter object with CSS selectors and transformations.

Proof of Concept

This is a proof-of-concept demo that was shown at Flutter Forward, you can see a simple Flutter app embedded in an HTML-based webpage. The demo also showed how to make changes to the Flutter state using a JavaScript event handler and an HTML button.

--

--