Material 3

5 MinutenFarben und Schriften aus dem Theme statt fester Werte

Theme statt fester Werte

Material 3 liefert ein Theme mit Farben und Schriften und fertige Bausteine wie Card.

Theme.of(context).colorScheme: Farben statt Color(0xFF…)
Theme.of(context).textTheme: Schriftgrößen statt fontSize: …
Card: Fläche mit Hintergrund und abgerundeten Ecken

Theme statt fester Werte

final colorScheme = Theme.of(context).colorScheme;
final textTheme = Theme.of(context).textTheme;

return Card(
  color: colorScheme.primaryContainer,
  child: Padding(
    padding: const EdgeInsets.all(24),
    child: Text(city.name, style: textTheme.headlineMedium), // in der Column
  ),
);

Dark Mode

Weil Farben und Schriften aus dem Theme kommen, braucht der Dark Mode nur ein zweites Theme.

MaterialApp(
  theme: ThemeData(colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue)),
  darkTheme: ThemeData(
    colorScheme: ColorScheme.fromSeed(
      seedColor: Colors.blue,
      brightness: Brightness.dark,
    ),
  ),
  themeMode: ThemeMode.system,
)