From Mobile to Web: Reusing Flutter via Multi-View Embedding
summary
Shows how to embed a Flutter web build into an existing site with custom bootstrap + multiview flag, then replace runApp with run_widget vs runApp to manage multiple FlutterView instances, call app.addView(element, initialData) for each view, and keep state across views; demo runs, hot reload works on Chrome (master channel). Covers lazy-loading with deferred imports (example: one initial main plus six split parts, initial payload ~4+ MB), entryPoint casing bug (now fixed), CanvasKit telemetry and URL-strategy pitfalls.
AI-written summary · about
chapters (12)
- 0:00Multi-view embedding intro
- 3:12Embed Flutter in web apps
- 7:08Single-view embedding basics
- 10:20Five steps to multi-view embedding
- 15:44Hosting Flutter assets
- 17:11Debugging embedded apps
- 19:14Hot reload in embedded
- 21:04Lazy loading for speed
- 22:52Event propagation & host
- 24:18URL strategy pitfalls
- 25:00Telemetry & rendering issues
- 26:04Embedding best practices
related talks
27mAdd-to-web: Reusing Flutter via multi-view embedding
36mMulti Window in Flutter Desktop
34mGoogle Flutter: The Next Frontier in Mobile Development
43mAdding WebView to your Flutter app
33mBeyond Mobile: Building Flutter Apps for iOS, Android, Chrome OS, and Web
42mFlutter everywhere — from Mobile to Web
50mFlutter in Action: How to build cross-platform app with Dart
25mCreating responsive UIs and other nuances of Flutter Web