Tematização no Flutter com Material 3 – Um guia abrangente

Publicado em por
Tempo de leitura: 4 minutes

No domínio do desenvolvimento do Flutter, o tema desempenha um papel crucial na definição da identidade visual do seu aplicativo. Um tema é essencialmente uma coleção de estilos que podem ser aplicados a todo o aplicativo, a uma tela específica ou a uma hierarquia de visualização. A personalização do tema permite alinhar a aparência do aplicativo com suas preferências de design exclusivas ou com o design estabelecido da sua empresa.

 

Material 3 e seus novos recursos

O Material 3 apresenta vários recursos novos que aprimoram os recursos de temas no Flutter. Para obter informações mais detalhadas sobre esses recursos, você pode consultar a documentação oficial do Material 3.

Um recurso de destaque no Material 3 permite que você defina o tema de cores de todo o seu aplicativo a partir de uma única cor inicial. Ao especificar a cor para o parâmetro de semente do esquema em seu construtor de dados de tema, o Flutter gera dinamicamente vários esquemas de cores para cada widget em seu aplicativo. Essa funcionalidade se estende perfeitamente aos modos claro e escuro.

No Material 3, a cor de semente padrão é definida como Roxo e a família de fontes padrão é Roboto.

 

Primeiros passos

Antes de nos aprofundarmos na implementação prática, certifique-se de que o Flutter esteja configurado em sua máquina. Caso contrário, siga as instruções fornecidas no guia de instalação do Flutter.

Crie um novo projeto do Flutter usando seu IDE preferido (Android Studio/VS Code) ou a linha de comando. Por padrão, todo projeto do Flutter é configurado com o tema Material, apresentando uma cor de semente roxa e a família de fontes Roboto.

 

Criação de um tema personalizado

Abra o arquivo main.dart na pasta lib de seu projeto. Esse arquivo normalmente contém o widget MaterialApp. No widget MaterialApp, você pode configurar dois temas: um para o modo escuro e outro para o modo claro.

@override
Widget build(BuildContext context) {
  return MaterialApp.router(
    debugShowCheckedModeBanner: false,
    title: 'Flutter End to End',
    theme: CustomTheme.lightThemeData(context),
    darkTheme: CustomTheme.darkThemeData(),
  );
}

Para simplificar seu código, considere a possibilidade de criar um novo arquivo Dart chamado theme.dart na pasta lib. Nesse arquivo, defina uma classe CustomTheme com métodos estáticos para os temas claro e escuro.

class CustomTheme {
  static ThemeData lightThemeData(BuildContext context) {
    return ThemeData(
      // ... configurar as propriedades do tema light
    );
  }

  static ThemeData darkThemeData() {
    return ThemeData(
      // ... configurar as propriedades do tema escuro
    );
  }
}

e abaixo um exemplo real de como poderia.

import 'package:flutter/material.dart';

class CustomTheme {
  static ThemeData lightThemeData(BuildContext context) {
    return ThemeData(
      primaryColor: Colors.blue,
      brightness: Brightness.light,
      // ... adicione mais propriedades conforme necessário
    );
  }

  static ThemeData darkThemeData() {
    return ThemeData(
      primaryColor: Colors.red,
      brightness: Brightness.dark,
      // ... adicione mais propriedades conforme necessário
    );
  }
}

Em seguida, chame esses métodos no widget MaterialApp, conforme mostrado acima.

Para integrar o Material 3 em seu aplicativo, defina a propriedade useMaterial3 como true em ThemeData, se você não estiver usando o Flutter 3.16.x ou superior, pois a partir desta versão é padrão ativar.

class CustomTheme {
  static ThemeData lightThemeData(BuildContext context) {
    return ThemeData(
      useMaterial3: true,
      // ... outras propriedades do tema claro
    );
  }

  static ThemeData darkThemeData() {
    return ThemeData(
      useMaterial3: true,
      // ... outras propriedades do tema escuro
    );
  }
}

 

Light Theme Mode

No modo light theme, você pode personalizar várias propriedades usando o construtor ThemeData. Aqui estão algumas propriedades comumente usadas:

  1. Color Scheme Seed:
  2. A propriedade colorSchemeSeed aceita uma única cor e, com base nessa cor, são construídas paletas de tons. A cor semente padrão no Material 3 é roxo.
  • Código dartCopy
  • ThemeData( colorSchemeSeed: Colors.green, // ... outras propriedades )
  1. Para obter mais informações sobre o sistema de cores do Material 3, consulte a documentação oficial.
  2. Color Scheme:
  3. Personalize as propriedades de cores usando a propriedade colorScheme. Você pode definir o construtor ColorScheme diretamente ou usar o construtor nomeado ColorScheme.fromSeed para obter mais flexibilidade.
  • ThemeData( colorScheme: ColorScheme.fromSeed( seedColor: Colors.green, background: Colors.white, error: Colors.red, onTertiary: Colors.orange, ), // ... outras propriedades )

 

  1. Visite o Material 3 Theme Builder para obter opções detalhadas de personalização.
  2. App Bar Theme:
  3. Personalize o App Bar Theme usando a propriedade appBarTheme.
  • ThemeData( appBarTheme: const AppBarTheme( color: Colors.green, shadowColor: Colors.red, elevation: 5, foregroundColor: Colors.white, ), // ... outras propriedades )
  1. Font Family:
  2. Aplique uma font family a todo o projeto de várias maneiras, incluindo a importação de arquivos de fontes, a criação de um pacote personalizado ou o uso do pacote google_fonts.
  • ThemeData( fontFamily: 'Schyler', // ... outras propriedades )
  1. Explore as explicações detalhadas na documentação do Flutter.
  2. Text Theme:
  3. Personalize os temas de texto modificando propriedades como tamanhos de fonte, cores e famílias de fontes.
  • ThemeData( textTheme: TextTheme( // ... custom text styles ), // ... outras propriedades )
  1. Utilize a classe MaterialStateProperty para lidar com diferentes estados do botão.
  2. Hover Color:
  3. Defina Hover Color, particularmente relevante para plataformas da Web/desktop.
  • ThemeData( hoverColor: Colors.green.shade200, // ... outras propriedades )

 

Dark Theme Mode

No dark theme mode, a cor roxa padrão e a família de fontes Roboto são redefinidas. Se você aplicou famílias de fontes diferentes no modo claro, lembre-se de reaplicá-las no dark mode.

 

Gerenciamento Theme Modes

Implemente um mecanismo para alternar entre os modos de tema claro e escuro. Isso pode ser feito usando ferramentas de gerenciamento de estado como o Provider. Atualize a propriedade themeMode no MaterialApp adequadamente.

MaterialApp.router(
  debugShowCheckedModeBanner: false,
  title: 'Flutter End to End',
  theme: CustomTheme.lightThemeData(context),
  darkTheme: CustomTheme.darkThemeData(),
  themeMode: context.watch<CommonProvider>().themeModeType,
)

 

Para conhecer conceitos mais avançados de temas, como extensões de tema e substituição de temas, fique atento a futuras publicações no blog.