Add-to-web: Reusing Flutter via multi-view embedding
summary
Shows how to embed multiple independent Flutter web views into an existing site by replacing the generated bootstrap with a custom loader, enabling the multiview_enabled flag, and using runWidget instead of runApp so views can be added/removed at runtime and return identifiers. Demonstrates shared state by lifting it above the view collection, JS interop for host communication, and using deferred imports to cut main bundle from ~4 MB to ~2 MB. Notes hot reload on Chrome, event-propagation, host-element replacement and CanvasKit telemetry caveats.
AI-written summary · about
chapters (9)
- 0:00Introduction to multi-view
- 2:42History of Flutter embedding
- 4:02Demo: The Belgium Bonanza
- 7:17Setting up single-view
- 10:52Implementing multi-view
- 16:14Sharing state and hosting
- 19:11Debugging and tooling
- 21:41Optimizing load times
- 23:31Closing tips and pitfalls
related talks
27mFrom Mobile to Web: Reusing Flutter via Multi-View Embedding
36mMulti Window in Flutter Desktop
43mAdding WebView to your Flutter app
34mGoogle Flutter: The Next Frontier in Mobile Development
40mHow I met Flutter
13mLearn how Flutter enhances web apps
42mFlutter everywhere — from Mobile to Web
33mBeyond Mobile: Building Flutter Apps for iOS, Android, Chrome OS, and Web