Flutter — live coding declarative UI

on YouTube ↗01h 13m

" summary

Live-coding reproduces a provided mock in Flutter, building a header, tabs and card list using Scaffold, AppBar, ListView.builder and asset images; avatar rounding uses CircleAvatar and ClipRRect and card descriptions are limited with maxLines=3 plus ellipsis. Hot reload pushes changes instantly to the emulator. The session hits and recovers from a runtime crash showing the red error screen and fixes a layout constraint (infinite height) issue. The header is mostly finished and the app runs interactively.

AI-written summary · about

" chapters (8)

1. 0:00Welcome
2. 10:09Preparing layout
3. 20:10Material and widgets
4. 30:31Styling and assets
5. 40:39Debugging tools
6. 50:40Cross-platform adaptation
7. 1:00:41Images and avatars
8. 1:10:00Summary

" related talks

• 50mFlutter in Action: How to build cross-platform app with DartVitalii Bobrov · Mobile Era 2018
• 38mFlutter: A Path of Vines and FlowersElaine Dias Batista · Android Makers 2020
• 36mFlutter-Google's latest innovation for mobile, web, and desktop appsMatt Sullivan, Martin Anguinis · WeAreDevelopers World Congress 2019
• 33mBeyond Mobile: Building Flutter Apps for iOS, Android, Chrome OS, and WebEmily Fortuna, Emily Shack · Google I/O 2019
• 28mBuilding a Flutter App for UbuntuBrett Morgan · Ubuntu Summit 2022
• 49mFluttering forward: Building a cross-platform appDominique Vigeant · Women Techmakers Montreal 2024
• 40mFlutter — what is it?Alexandr Sergienko · Mobile Fest 2018
• 37mFlutter DevelopmentEmily Fortuna, Matt Sullivan, Maurice Parrish · Flutter Live 2018