May 9, 2025
Shell-Micro Split: Architect a host shell with isolated micro-app modules for scalable builds.
Independent Projects: Each micro-app is a standalone Flutter Web build injected via custom script or iframe.
Cross-Module Messaging: Use
window.postMessageor an event bus for decoupled communication.Dynamic Loading: Register micro-apps with
platformViewRegistryand render usingHtmlElementView.Zero-Downtime Deployment: Serve micro-apps via CDN, version with manifests, and automate shell updates.
Tech Flexibility: Supports heterogeneous stacks, enabling React/Vue and Flutter side-by-side.
Introduction
Micro frontends break monolithic web apps into discrete, independently deployable modules. On Flutter Web, this means splitting your application into a _shell_ and multiple _micro-apps_ that can be developed, tested, and deployed in isolation. In this tutorial, you’ll learn how to design a micro-frontend architecture with Flutter Web, set up module bundling, enable cross-module communication, and deploy at scale.
Architecture Overview
A micro-frontend system typically consists of:
Shell: The host application that handles global layout, authentication, and routing.
Micro-apps: Self-contained Flutter Web bundles exposing a UI fragment.
Orchestrator: A router in the shell that loads and unloads micro-apps on demand.
Key benefits include independent release cycles, tech-stack heterogeneity (you could mix React/Vue with Flutter), and fault isolation. Your shell will dynamically inject micro-apps as JavaScript bundles or iframes.
Setting Up Micro-Frontend Modules
Create each micro-app as its own Flutter Web project:
flutter create micro_appIn
web/index.html, add a custom script tag placeholder:
Register the micro-app in the shell via
dart:ui.platformViewRegistry:
In your shell widget tree, include a
HtmlElementView:
This pattern lets each micro-frontend remain a standalone Flutter Web bundle yet render inside your host shell.
Communication and State Management
Micro-apps often need to share state or notify the shell of events. Use window messaging or a lightweight event bus:
In the shell:
By standardizing message contracts, you decouple micro-frontend modules while enabling cross-bundle communication.
Deployment and Scaling
For continuous delivery:
Build each micro-app:
flutter build web --release --base-href /micro_app/Host bundles on a CDN or static site host.
Update shell’s deployment script to inject new
<script>tags oriframe.srcURLs automatically.
Use semantic versioning for your micro-apps, and expose a manifest JSON from your CDN:
The shell can fetch this manifest at startup, dynamically register versions, and support zero-downtime upgrades of individual micro-frontend modules.
Vibe Studio
Vibe Studio, powered by Steve’s advanced AI agents, is a revolutionary no-code, conversational platform that empowers users to quickly and efficiently create full-stack Flutter applications integrated seamlessly with Firebase backend services. Ideal for solo founders, startups, and agile engineering teams, Vibe Studio allows users to visually manage and deploy Flutter apps, greatly accelerating the development process. The intuitive conversational interface simplifies complex development tasks, making app creation accessible even for non-coders.
Conclusion
Implementing micro-frontends in Flutter Web gives you modularity, independent deployments, and scalable teams. By splitting your app into a shell and multiple micro-apps, registering each module with platformViewRegistry, and using postMessage for communication, you maintain decoupling while delivering a seamless UI. Scale effortlessly by versioning micro-frontend bundles, serving them from a CDN, and automating shell updates. This micro-frontend architecture ensures that large Flutter Web projects remain maintainable and adaptable as your codebase evolves.
