You CAN embed a flutter app in a HTML tag (without an iFrame!)
2 min readSep 6, 2023
I’ve been evaluating Flutter for a new project, and one question I had was: can a flutter web app be embedded inside a HTML page (or a React app for example).
There was quite a lot of old/contradictory information on the interwebs (surprise 😆), e.g. a heap of workarounds (e.g. DartPad), and the dreaded iframe.. (although this still has a place, and is referenced in the docs).
Why tho?
A number of reasons. Common ones include:
- concerns about Flutters poor SEO support want the option to “wrap” their applications with some search-engine readable metadata
- ability to migrate to Flutter from other frameworks incrementally
TL;DR; Since v3.10 you can embed a Flutter web app into any HTML element of your web page
To tell Flutter web in which element to render, use the
hostElementparameter of theinitializeEnginefunction:
<html>
<head>
<!-- ... -->
<script src="flutter.js" defer></script>
</head>
<body>
<!-- Ensure your flutter target is present on the page... -->
<div id="flutter_host">Loading...</div>
<script>
window.addEventListener("load", function (ev) {
_flutter.loader.loadEntrypoint({
onEntrypointLoaded: async function(engineInitializer) {
let appRunner = await engineInitializer.initializeEngine({
// Pass a reference to "div#flutter_host" into the Flutter engine.
hostElement: document.querySelector("#flutter_host")
});
await appRunner.runApp();
}
});
});
</script>
</body>
</html>See the flutter docs, or this interactive demo for more.
