Stage 2 · Lesson 9 of 10
Material 3 theming and dark mode
is 's default design system. Define the look once in ThemeData, usually with ColorScheme.fromSeed(seedColor: ...). From one colour, it creates a full palette of roles like primary, surface and onSurface.
Pass a light theme to theme and a dark one to darkTheme. By default themeMode follows the phone's own setting. read colours with Theme.of(context).colorScheme and text styles with textTheme, instead of using fixed colours and sizes.
Component themes, such as filledButtonTheme, style every button of one kind in one place.
Common traphard-coding Colors.white and font sizes in widgets: dark mode then shows white cards with white text, and a rebrand touches every file.
A question to check yourself, an AI practice session and 1 cheat sheet entry come with the full roadmap. Unlock
Resources for this stage
Start with
- GuideFreeFlutter Documentation
Google
Do the first Flutter app codelab, then the layout, constraints and lists pages