🌇Theme

Nesta pasta é onde vamos encontrar os arquivos para temas de Cores e TextStyles para serem utilizados na aplicação.

Documentação: Gerenciamento de Temas e Estilos de Texto

Objetivo:

O objetivo dessa implementação é centralizar e simplificar o gerenciamento de cores e estilos de texto no aplicativo, oferecendo suporte para os modos claro e escuro, baseados no tema do dispositivo. Essa abordagem permite personalização rápida e reutilização de estilos de forma consistente e fácil de manter.

---

Estrutura de Cores e Estilos de Texto

Cores:

Foi criada uma estrutura baseada em duas classes principais para gerenciar as cores dos temas:

• AppColorsLight: Define as cores do tema claro.

• AppColorsDark: Define as cores do tema escuro.

A seleção do tema (claro ou escuro) é feita automaticamente com base no tema atual do dispositivo, utilizando a propriedade platformBrightness do WidgetsBinding para detectar a preferência do usuário.

Estilos de Texto:

Da mesma forma, foram criadas classes para os estilos de texto:

• AppTextStylesLight: Define os estilos de texto para o tema claro.

• AppTextStylesDark: Define os estilos de texto para o tema escuro.

Cada classe contém os estilos predefinidos, como bodyText, headline, subtitle, entre outros. Usando o método copyWith, é possível personalizar qualquer propriedade de estilo, como color, fontSize, fontWeight, etc.

---

Implementação:

1. Definindo as Classes de Cores: As classes AppColorsLight e AppColorsDark são responsáveis por fornecer as cores para cada tema. Elas implementam a interface AppColors, garantindo que ambas as implementações sigam a mesma estrutura.

   abstract class AppColors {
     Color get primary;
     Color get secondary;
     Color get background;
     Color get text;
   }
   
   class AppColorsLight implements AppColors {
     @override
     Color get primary => Color(0xFF0D47A1);  // Exemplo de cor primária
     @override
     Color get secondary => Color(0xFF42A5F5);
     @override
     Color get background => Color(0xFFF5F5F5);
     @override
     Color get text => Colors.black;
   }
   
   class AppColorsDark implements AppColors {
     @override
     Color get primary => Color(0xFF90CAF9);  // Exemplo de cor primária no modo escuro
     @override
     Color get secondary => Color(0xFF64B5F6);
     @override
     Color get background => Color(0xFF212121);
     @override
     Color get text => Colors.white;
   }

2 - Detectando o Tema do Dispositivo: A seleção do tema ativo (claro ou escuro) é feita com base no platformBrightness, acessível via WidgetsBinding.instance.window.platformBrightness.

• Se o dispositivo estiver no modo escuro (Brightness.dark), a classe AppColorsDark será utilizada.

• Caso contrário, a classe AppColorsLight será selecionada.

AppColors get currentTheme {
  // Detecta o tema atual do dispositivo
  final brightness = WidgetsBinding.instance.window.platformBrightness;
  
  // Retorna a classe correspondente
  if (brightness == Brightness.dark) {
    return AppColorsDark();
  } else {
    return AppColorsLight();
  }
}

3 - Estilos de Texto: As classes AppTextStylesLight e AppTextStylesDark são usadas para definir os estilos básicos de texto, como bodyText e headline. Elas também seguem a estrutura da interface AppTextStyles.

abstract class AppTextStyles {
  TextStyle get bodyText;
  TextStyle get headline;
  TextStyle get subtitle;
}

class AppTextStylesLight implements AppTextStyles {
  @override
  TextStyle get bodyText => TextStyle(fontSize: 16, color: Colors.black);
  
  @override
  TextStyle get headline => TextStyle(fontSize: 24, fontWeight: FontWeight.bold, color: Colors.black);
  
  @override
  TextStyle get subtitle => TextStyle(fontSize: 18, color: Colors.black87);
}

class AppTextStylesDark implements AppTextStyles {
  @override
  TextStyle get bodyText => TextStyle(fontSize: 16, color: Colors.white);
  
  @override
  TextStyle get headline => TextStyle(fontSize: 24, fontWeight: FontWeight.bold, color: Colors.white);
  
  @override
  TextStyle get subtitle => TextStyle(fontSize: 18, color: Colors.white70);
}

4 - Uso do copyWith: Para personalizar dinamicamente um estilo de texto (como alterar a cor de um bodyText), o método copyWith pode ser utilizado, permitindo a alteração das propriedades dos estilos de forma eficiente.

Exemplo de personalização de estilo:

final customTextStyle = textStyles.bodyText.copyWith(color: Colors.blue, fontSize: 18);

Uso:

1. Acesso às Cores e Estilos: Para acessar as cores e estilos de texto, utilize a função currentTheme, que retorna a classe de tema ativa com base no tema do dispositivo.

   Exemplo de uso de cores:

   final colors = currentTheme; // Obtém a classe de tema (claro ou escuro)

   Exemplo de uso de estilos de texto:

   final textStyles = currentTextStyles; // Obtém os estilos de texto (claro ou escuro)
   

2. Personalização com copyWith: Se você precisar personalizar dinamicamente um estilo de texto, utilize o método copyWith.

   Exemplo de personalização de estilo:

   dartCopyfinal customTextStyle = textStyles.bodyText.copyWith(color: Colors.blue, fontSize: 18);

---

Motivos e Benefícios:

• Centralização: Todos os estilos de cores e textos são definidos de maneira centralizada, garantindo consistência entre os temas claro e escuro.

• Facilidade de Manutenção: Alterações nas cores ou estilos de texto podem ser feitas em um único local, sem a necessidade de modificar múltiplos widgets manualmente.

• Simplicidade: A lógica de alternância entre os modos claro e escuro é simples e baseada no tema do dispositivo, eliminando a necessidade de estruturas complexas.

• Flexibilidade: O uso do método copyWith nos estilos de texto permite personalização rápida, sem precisar criar novos estilos manualmente.

• Reusabilidade: Com as classes AppColors e AppTextStyles, é fácil reutilizar as definições de estilo em diferentes partes da aplicação, mantendo uma UI consistente e facilmente ajustável.

---

Considerações Finais:

Essa abordagem fornece uma maneira eficiente e flexível de gerenciar temas e estilos de texto, mantendo a simplicidade e garantindo que o aplicativo se adapte automaticamente ao tema do dispositivo. A possibilidade de personalizar dinamicamente os estilos com copyWith oferece ainda mais controle sobre o visual da aplicação, sem complicações adicionais.