Day 9 · Dynamic UI — Conditionals, Loops & Theming
Press F to toggle fullscreen · Esc to exit · I for info
Day 9

Dynamic UI — Conditionals, Loops & Theming

Make your UI react to data. if/else inside widgets, render lists with for/map, ListView.builder, and theming with ThemeData. Plus dark mode that actually flips. Visual demos throughout.

Topics Covered
if/else in widgetscollection-if & collection-forList.map → widgetsListView & ListView.builderWorking with Map<String, dynamic>ThemeData & colorSchemeTheme.of(context)Dark mode toggle
Resources
Flutter: Conditionally render UI ThemeData class Material 3 Theme builder ListView.builder DartPad (Flutter mode)
Assignments
1
Build a product list from a hardcoded List<Map>
2
Show 'Out of stock' badge conditionally
3
Use ListView.builder for the list
4
Define a custom ThemeData (your brand color)
5
Replace all hardcoded colors with Theme.of(context)
6
Add a dark mode toggle button
7
BONUS: filter list by category (chips at the top)
8
Push to flutter-tr06 via PR