Element Embedding in Flutter Web

Learn how to embed the Flutter app on the native web without hustle

A few days back, in January 2023, Flutter 3.7 was released at the Flutter Forward event. Many new updates and features that have been added give us an idea of where Flutter is headed next. One update regarding Flutter web is — now Flutter has the ability to be embedded into the native web. Sounds interesting, right?!

Today we’ll explain how this update works and what Flutter uses internally to achieve it.

What is element embedding in the web?

• Element embedding is nothing but embedding external components to the native web.
• We can apply native capability to external components, such as giving style with CSS and changing states with JavaScript code.

How does element embedding work for Flutter web?

• It is the same way that Flutter implements for web in index.html file.
• We need to add a <div> tag for showing the Flutter app and give it an id as well.
• Then, implemented <div> can be extracted in a variable by document.querySelector method.
• After that, this variable needs to be passed to hostElement on engineInitializer.initializeEngine method.
• Now, you can use that <div> for another operation with Javascript and CSS.

Refer to the below code for a better understanding.

Note: This code is from the demo represented in Flutter Forward.

How the state is maintained between Flutter and Javascript?

• It uses an interoperability concept that involves communication between Other languages to Javascript and vice-versa.
• I used our favorite counter app for implementation. The following sections explain both Flutter and Javascript side implementation.

Flutter side implementation

• Here, you need to use the js package and import the file js_util.
• First, you need to annotate _MyAppState with JSExport annotation.
• Then, set a property for accessing annotated class methods and parameters in JavaScript code.
• Also, you can make callbacks which can be called in JavaScript code.

Refer to the below code for a better understanding.

JavaScript side implementation

• Create a JavaScript file at this path project_directory/web/js/demo-js-interpo.js
• Next, add the created file to the index.html file, the same as the code below.

• Then, access the HTML element by document.querySelector.
• Also, with the window object, you can access _appState, which we’ve created in the Flutter side implementation. So we can use Flutter side methods and parameters.

Refer to the below code snippets for a better understanding.

How to apply CSS to the Flutter Component?

• You can apply shadow, background color, and another styling with the help of CSS.

Refer to the below code.

Wrapping up

We’ve explained the features of the Flutter web and how it works.

You can find the whole source code from the Flutter official repo.

Note: This concept is still in the experimental stage as I’m writing; refer to it here.

Also, all the examples have been cited from the official Flutter repository, and when playing around with this update, you need to install dart3-alpha. Check for the installation of dart3-alpha here.

Stay tuned and follow Simform Engineering for upcoming informative and exciting Flutter Forward topics articles.

Happy Coding :)