Flutter Web in action
summary
Porting 4 Pics 1 Word to Facebook Instant Games uses Flutter Web and forces hard tradeoffs: the HTML renderer yields a ~1.3 MB build (~380 KB gzipped) but creates many DOM canvases and chokes on complex decorations; CanvasKit delivers near‑native rendering on desktops and many phones but ships a multi‑megabyte WASM runtime and fails for ~3% of users without WASM support, and low‑end Android still stutters. Solutions: custom nine‑slice decoration images, dual rendering paths, pagewise asset preloading and background shader warm‑up; result is playable in production after significant engineering.
AI-written summary · about
chapters (12)
- 0:00Introduction to 4 Pics 1 Word
- 1:39Flutter migration benefits
- 4:40Instant game platform challenges
- 5:50Initial web strategy and choices
- 9:08HTML renderer performance issues
- 10:43Optimizing for HTML rendering
- 13:21Switching to canvas kit
- 17:12Managing canvas kit limitations
- 23:13Asset preloading strategies
- 27:09Eliminating animation jank
- 31:45Device classification for performance
- 34:27Conclusion and takeaways
related talks
40mMastering Flutter Web
31mFlutter. New Approach to Web Development
35mServer-Side Rendering for Flutter Web: Promising Paths or Dead End
28mFlutter, Dart, and WASM-GC: A new model for Web applications
42mFlutter everywhere — from Mobile to Web
34mModern Web Game Development
44mImplications of Flutter WASM
13mLearn how Flutter enhances web apps