ThemeData e ColorSchema | Flutter

• ThemeData e ColorSchema | Flutter

🔥 Entendendo o ThemeData

O Flutter tem o ThemeData, que define o tema geral do app:

MaterialApp(
  theme: ThemeData(
    primaryColor: Colors.blue,     // Cor principal
    scaffoldBackgroundColor: Colors.white, // Fundo das telas
    colorScheme: ColorScheme.fromSeed(
      seedColor: Colors.blue, // Gera cores harmoniosas a partir dessa
    ),
  ),
  home: HomePage(),
);

Dica: a partir do Flutter 3, o recomendado é usar colorScheme em vez de primaryColor direto.

---

🎨 O que é ColorScheme?

O ColorScheme define um conjunto de cores principais:

Campo	O que é
primary	Cor principal (botões, appbar, etc)
secondary	Cor de destaque (ações secundárias)
background	Fundo da tela
surface	Fundo de cartões, containers, etc
error	Cor para erros
onPrimary	Cor do texto/icon em cima do primary
onBackground	Cor do texto em cima do fundo
onSurface	Cor do texto em cima do surface

---

🔥 Exemplo prático:

MaterialApp(
  theme: ThemeData(
    colorScheme: ColorScheme(
      brightness: Brightness.light,
      primary: Colors.purple,
      onPrimary: Colors.white,
      secondary: Colors.amber,
      onSecondary: Colors.black,
      background: Colors.grey[100]!,
      onBackground: Colors.black,
      surface: Colors.white,
      onSurface: Colors.black,
      error: Colors.red,
      onError: Colors.white,
    ),
  ),
  home: HomePage(),
);

• Agora quando você usar um botão (ElevatedButton), ele vai automaticamente usar primary.
• O texto dentro vai usar onPrimary.

---

⚡ E para pegar a cor no seu código?

Em qualquer widget, você pode acessar as cores do tema:

Color primary = Theme.of(context).colorScheme.primary;
Color background = Theme.of(context).colorScheme.background;

Assim, seu app fica consistente!

---

📢 Resumindo:

• ThemeData → tema geral.
• ColorScheme → controla cores específicas.
• Usar isso deixa o app mais bonito e muito mais fácil de manter.
• Pode mudar entre dark/light mode de forma automática.