Demystifying Text Rendering in Flutter
summary
Shows concrete causes and fixes for Flutter text breakage: misaligned and clipped glyphs from font fallback and emoji differences, bizarre layout shifts with Unicode (about 149,186 characters in the table), and accessibility scaling breaking UIs. Explains the pipeline — paragraph/itemization, HarfBuzz shaping, Skia/SkParagraph (moving to Impeller) — and practical workarounds like using an uber font (Noto ~150MB), a textScaleFactor hack, performance limits from non‑lazy layout, and the TextPainter double-draw custom ellipsis technique.
AI-written summary · about
chapters (6)
- 0:00Introduction to text rendering
- 3:38Why text is deceptive
- 15:21Flutter text rendering stack
- 23:22Practical text rendering issues
- 35:59Future of text rendering
- 38:48Conclusion and recap
related talks
35mServer-Side Rendering for Flutter Web: Promising Paths or Dead End
20mBuilding RTL-Ready Flutter Apps
25mCreating responsive UIs and other nuances of Flutter Web
41mPortable Material: Flutter physical models
13mLearn how Flutter enhances web apps
40mMastering Flutter Web
42mFlutter everywhere — from Mobile to Web
22mInnovation and Trends in Flutter for web