Dominando o Material 3 no Flutter: O Guia Definitivo

O Material 3 (M3), também conhecido como Material You, é a versão mais recente do sistema de design da Google. Ele foca em personalização, expressividade e acessibilidade. No Flutter, o suporte ao M3 é completo e traz uma estética muito mais moderna e arredondada.

Abaixo, apresento um guia detalhado sobre o Material 3 no Flutter 3.41, com explicações técnicas e exemplos práticos.

O Material 3 não é apenas uma “camada de tinta”. Ele introduz mudanças estruturais na forma como as cores são geradas, como os componentes se comportam e como a tipografia é escalada.

---

🎨 1. Color Scheme e Dynamic Color

A maior mudança está no sistema de cores. Em vez de definir cores estáticas (Primary, Secondary), o M3 usa um ColorScheme baseado em algoritmos.

O Método: ColorScheme.fromSeed

Este método gera uma paleta completa (cerca de 30 cores) a partir de uma única cor “semente”.

ThemeData(
  useMaterial3: true, // Habilita o M3
  colorScheme: ColorScheme.fromSeed(
    seedColor: Colors.indigo,
    brightness: Brightness.light, // Pode ser dark ou light
  ),
)

Explicação: O Flutter calcula automaticamente cores de destaque, cores de superfície e cores de erro que harmonizam perfeitamente com a cor escolhida.

---

🏗️ 2. Principais Componentes e Métodos

A. NavigationBar (Substituto do BottomNavigationBar)

O M3 substituiu o antigo menu inferior por um design mais alto e com um indicador de seleção em pílula.

Exemplo:

NavigationBar(
  selectedIndex: index,
  onDestinationSelected: (i) => setState(() => index = i),
  destinations: const [
    NavigationDestination(icon: Icon(Icons.home), label: 'Home'),
    NavigationDestination(icon: Icon(Icons.chat), label: 'Mensagens'),
  ],
)

B. SearchBar e SearchAnchor

O M3 trouxe um componente de busca nativo e muito mais elegante que o simples TextField.

Exemplo:

SearchBar(
  hintText: "Buscar morador...",
  leading: const Icon(Icons.search),
  onTap: () => print("Iniciando busca"),
)

C. SegmentedButton (Substituto do ToggleButtons)

Ideal para filtros ou alternar entre visões (como “Pendentes” e “Pagos” no seu app de condomínio).

Exemplo:

SegmentedButton<int>(
  segments: const [
    ButtonSegment(value: 0, label: Text('Dia'), icon: Icon(Icons.calendar_view_day)),
    ButtonSegment(value: 1, label: Text('Mês'), icon: Icon(Icons.calendar_view_month)),
  ],
  selected: {selectedView},
  onSelectionChanged: (newSelection) {
    setState(() => selectedView = newSelection.first);
  },
)

🔠 3. Tipografia e Escala de Texto

A escala de texto mudou de Headline, Title, Subtitle para uma hierarquia mais lógica: Display, Headline, Title, Body e Label, cada uma com três tamanhos (Large, Medium, Small).

Como acessar no código:

Text(
  'Título Principal',
  style: Theme.of(context).textTheme.headlineMedium,
)

🛠️ 4. Métodos de Personalização de Tema (ThemeData)

Para um controle refinado, o Material 3 permite que você sobrescreva o tema de componentes específicos globalmente.

O Método: copyWidth ou styleFrom

Usado para manter a base do M3, mas ajustar detalhes como o arredondamento de botões.

ThemeData(
  useMaterial3: true,
  colorSchemeSeed: Colors.blue,
  elevatedButtonTheme: ElevatedButtonThemeData(
    style: ElevatedButton.styleFrom(
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
      elevation: 0, // M3 tende a usar superfícies planas (tonal elevation)
    ),
  ),
)

💡 Resumo das Diferenças: M2 vs M3

Recurso	Material 2	Material 3
Bordas	Levemente arredondadas (4dp)	Muito arredondadas (12dp a 28dp)
Elevação	Sombras projetadas pesadas	Elevação tonal (mudança de cor de fundo)
Botões	Retangulares	Formato de pílula ou bordas muito curvas
Cores	Paleta manual	Geradas por algoritmo (fromSeed)

✅ Conclusão

O Material 3 no Flutter 3.41 simplifica o trabalho do desenvolvedor ao automatizar a harmonia de cores e oferecer componentes mais inteligentes e acessíveis. Ao usar useMaterial3: true, seu aplicativo ganha instantaneamente um ar profissional e moderno.