Build a polished, adaptive Flutter UI that looks right on any screen. You will centralise colour and type in ThemeData, support dark mode, factory reusable styles, and respond to size with MediaQuery and LayoutBuilder so one codebase feels native on phones, tablets and foldables.
Watch the free preview
ThemeData and colour schemes — free to watch, no account needed.
What you'll learn
- Create a polished, adaptive UI that scales cleanly across phones and tablets
- Centralise colour and typography in ThemeData with a seeded ColorScheme
- Support light and dark mode driven by ThemeMode and system brightness
- Build reusable component styles with theme extensions and named styles
- Respond to screen size using MediaQuery, LayoutBuilder and breakpoints
Syllabus
Theming Foundations
ThemeData and colour schemesFree preview
Typography with TextTheme
Dark Mode & Reusable Styles
Dark mode with ThemeMode
Reusable styles and theme extensions
Responsive & Adaptive Layouts
Measuring the screen with MediaQuery
Adaptive layouts with LayoutBuilder
Fonts, Assets & Spacing Systems
Custom fonts and assets
Building a spacing system
Lab — 10 Exercises & Solutions
Exercises 1–5
Exercises 6–10