When AI builds the widget tree, performance considerations for Gen UI Apps

Transcript

1. When the AI Builds the Widget Tree Performance considerations for GenUI apps Gidudu Muyobo Nicholas Senior Flutter Engineer, SchoolPal
2. About Me - Senior Flutter Engineer - Currently at SchoolPal - Exploring GenUI and Flutter performance Gidudu Muyobo Nicholas FLUTTERBYTES CONFERENCE 2026
3. Live demo Watch the overlay. FLUTTERBYTES CONFERENCE 2026
4. Your widget tree has a new author Untrusted Layouts you'd never write Slow Seconds, not milliseconds Chatty Every tap can round-trip Our job: make this author cheap to work with. FLUTTERBYTES CONFERENCE 2026
5. Seven stages, seven costs Prompt → Tokens → Parse → Build → Frame → Event → Round trip FIX 1 FIX 2 FIX 3 FIX 4 Tokens Prompt Build Parse + frame Each stage can be attacked separately. FLUTTERBYTES CONFERENCE 2026
6. Measure before you optimise Prompt → first frame The one number users feel Timeline events DevTools Parse · Apply · Build Frames · Rebuilds · Memory FLUTTERBYTES CONFERENCE 2026
7. FIX 1 · TOKENS Show something sooner BEFORE Wait for the whole answer → AFTER Render as it streams Same total time. Much shorter wait. FLUTTERBYTES CONFERENCE 2026
8. FIX 1 · TOKENS Stream into the surface modelStream.listen(adapter.addChunk); Stream chunks // Root lists every id up front for (final id in ids) Same-size skeletons ctx.getComponent(id) == null ? const ComponentSkeleton() : ctx.buildChild(id), Layout first FLUTTERBYTES CONFERENCE 2026
9. FIX 2 · PROMPT Your catalog rides on every request 17.8k → 10.6k Every widget, every request Terse descriptions Flat schemas One catalog per screen Fewer optional fields Estimated prompt tokens (characters ÷ 4), same screen in the demo app FLUTTERBYTES CONFERENCE 2026
10. FIX 3 · BUILD Keep rebuilds small BEFORE AFTER Column( TripCard( key: UniqueKey(), key: ValueKey(data.id), children: [ /* 60 lines */ ], trip: data, ) ) Stable keys. Small builders. Const children. FLUTTERBYTES CONFERENCE 2026
11. FIX 4 · PARSE + FRAME Don't trust the layout 200 children in a Column → Lazy lists with caps Flex in an unbounded parent → Builders set the bounds Twelve levels of nesting → Depth limits in the schema Full-size photo in a thumbnail → cacheWidth + placeholder Huge JSON on the UI thread → Isolate.run for big payloads FLUTTERBYTES CONFERENCE 2026
12. FIX 4 · PARSE + FRAME The catalog decides the layout final places = data.places.take(12).toList(); return SizedBox( height: 196, child: ListView.builder( scrollDirection: Axis.horizontal, itemCount: places.length, itemBuilder: (_, i) => PlaceTile(places[i]), ), ); The AI picks what to show. Your builder picks how. FLUTTERBYTES CONFERENCE 2026
13. SAME APP · SAME MODEL · SAME PHONE Before → after 9.7 s 10.6k 9 9 ms from 13.8 s from 17.8k from 17 from 21 ms Prompt → first frame Prompt tokens Widget remounts Worst frame Early runs of the demo app · profile mode · Android phone · 1 naive run, 2 optimised runs · prompt tokens estimated as characters ÷ 4 FLUTTERBYTES CONFERENCE 2026
14. Your Monday-morning checklist 01 02 03 04 Measure first frame Stream components Scope the catalog Stable keys 05 06 07 08 Lazy, bounded lists Parse off the UI thread Debounce events Dispose old surfaces FLUTTERBYTES CONFERENCE 2026
15. The model chooses what to show. Your catalog decides what it costs. Treat the catalog as your performance budget. FLUTTERBYTES CONFERENCE 2026
16. Thank You Questions? Gidudu Muyobo Nicholas Senior Flutter Engineer, SchoolPal FLUTTERBYTES CONFERENCE 2026