From Mobile to Web: Reusing Flutter via Multi-View Embedding

Flutter Web is rapidly maturing with features like stateful hot reload and WASM compilation, but the default full-screen application model presents challenges for integration into large, existing web platforms. While iframes offer isolation, they introduce complexities in communication, styling, and context sharing. This talk is about taking a more integrated approach: embedding multi-view Flutter apps within your host web app, using custom initialization logic instead of relying on the standard generated index.html and its associated bootstrap script.

We dive into how multi-view apps allow multiple, independent Flutter components to be initialized at runtime in different parts of an existing web application. These views can share state internally, communicate with the host via JS interop and benefit from deferred imports to reduce startup times.

This session will show a case study of how we implemented multi-view embedding at Robaws to reuse an existing feature from our mobile Flutter app within our existing web application. We discuss the benefits, such as how our Web and Flutter team could continue to work independently and how this allowed us to easily add multiple other Flutter features without overhead. We also explain why we chose having 1 multi-view app over multiple smaller apps. Furthermore, the talk goes over some unintended improvements that adopting web had to our existing mobile apps, such as better support for large tablet screens.

Finally, we go over some challenges when embedding existing features in a web app, such as URL strategies, using plugins that only support mobile platforms, etc). The talk will also include some practical approaches for easy development, such as using separate build modes (mocked standalone without embedding, local server with embedding, final hosting of static release build), handling JS interop for passing context like design tokens and localization, and managing potential CORS issues during development.

This talk is aimed at Flutter developers who want to explore the possibilities of adding Flutter to their existing web applications and will focus on less explored concepts, such as deferred imports, custom initialization and Flutter views interacting with each other and with the host web app.