Create simple, beautiful UI with Flutter
summary
A boring starter Flutter app called myartist becomes a polished cross‑platform UI: the team swaps Roboto for Montserrat via google_fonts, seeds one color (seafoam green) into the Material Theme Builder to generate light and dark colorSchemes, wraps that in a ThemeProvider with DynamicColorBuilder fallback, adds responsive rules (navigation rail → bottomNavigationBar on mobile, TabBarView for home), increases padding to EdgeInsets ~35, uses colorScheme.outline on OutlinedCard, applies platform pageTransitionsTheme and a hoverableSongPlayButton that animates ranks into a Play button — it works across mobile and desktop.
AI-written summary · about
chapters (15)
- 0:00Introduction to workshop
- 0:17Workshop app overview
- 2:42Typography and icons
- 4:10Choosing custom fonts
- 9:44Setting the theme
- 12:43Material theme builder
- 15:25Adding color to UI elements
- 17:34Implementing dark mode
- 19:44Making the app adaptive
- 22:28Responsive home screen
- 25:22Refining white space
- 28:51Iterative padding changes
- 32:52Motion and animation
- 35:01Adding hover states
- 37:19Adding interactive features
related talks
36mAchieving seamless experience with Flutter and Material Components
32m"Flutter: How we're building a UI framework for tomorrow at Google"
15mBuilding a desktop design language with Flutter
32mBeyond Mobile: Material Design, Adaptable UIs, and Flutter
26mGoing bold with only one framework: How Flutter changes it all!
38mFlutter: A Path of Vines and Flowers
33mGenerative UI with Flutter
40mDeep Dive Into Flutter Theming