Flutter: Construindo apps temáticas!
Tags: flutter, braziliandevs
Published: 2023-01-09 17:35:00

O [Flutter](http://flutter.dev) é uma plataforma de desenvolvimento de aplicativos que permite a criação de interfaces visuais atrativas e intuitivas. Neste artigo, vamos descrever como "estilizar" um aplicativo Flutter utilizando apenas (na maioria dos casos) a classe `ThemeData`.

Com essa abordagem, é possível estilizar seu aplicativo sem quebrar os widgets padrão ou sujando os widgets com estilos próprios. Além disso, é possível criar a base de estilos para _light_/_dark_ _modes_ e garantir que as cores do aplicativo sejam exibidas corretamente no modo escuro. E, por fim, é possível ter diversos temas em seu aplicativo, bastando apenas trocar o `ThemeData` atual pelo desejado.

---

# Utilizando ThemeData

A classe `ThemeData` é uma classe do Flutter que permite customizar a aparência dos widgets do nosso aplicativo. Ela possui diversas propriedades que permitem alterar aspectos visuais do aplicativo, como cores, fontes, efeitos de sombra, entre outros.

A seguir, algumas das principais propriedades da classe `ThemeData`:

- **primaryColor**: Define a cor principal do aplicativo. Essa cor é utilizada em elementos como botões, guias e seções de cabeçalho.
- **accentColor**: Define a cor de destaque do aplicativo. Essa cor é utilizada em elementos como botões e links.
- **scaffoldBackgroundColor**: define a cor de fundo dos widgets `Scaffold`.
- **appBarTheme**: Define o estilo da barra de título (`AppBar`).
- **textTheme**: Define o estilo dos textos do aplicativo.
- **buttonTheme**: Define o estilo dos botões do aplicativo.

Para utilizar a classe `ThemeData`, basta passá-la como um argumento para o widget `MaterialApp` ou `CupertinoApp` na raiz do aplicativo. Veja abaixo:

```dart
MaterialApp(
  theme: ThemeData(
    primaryColor: Colors.purple,
    scaffoldBackgroundColor: Colors.grey[200],
  ),
  home: MyApp(),
);
```

## ColorSchemes e Material 3

Também vale falar da propriedade `colorSchemes` que também afeta alguns componentes e partes do app.

No [Material 3](https://m3.material.io), o conceito de esquemas de cor foi expandido para incluir mais opções de cores e permitir que os aplicativos se adaptem melhor às preferências do usuário.

Na versão mais recente do Flutter, é possível utilizar os esquemas de cor do Material 3 utilizando a classe `ColorScheme`, veja algumas propriedades abaixo:

- **primary**: a cor principal do esquema de cor.
- **primaryVariant**: uma variação da cor principal do esquema de cor.
- **secondary**: a cor secundária do esquema de cor.
- **secondaryVariant**: uma variação da cor secundária do esquema de cor.
- **background**: a cor de fundo do esquema de cor.
- **surface**: a cor da superfície do esquema de cor.
- **error**: a cor de erro do esquema de cor.
- **onPrimary**: a cor do texto quando colocado sobre a cor principal.
- **onSecondary**: a cor do texto quando colocado sobre a cor secundária.
- **onBackground**: a cor do texto quando colocado sobre a cor de fundo.
- **onSurface**: a cor do texto quando colocado sobre a cor da superfície.
- **onError**: a cor do texto quando colocado sobre a cor de erro.

Para utilizar, basta passar o um `ColorScheme` como `colorScheme` do ThemeData na raiz do aplicativo e adicionar `useMaterial: true` para habilitar o Material 3. Veja abaixo:

```dart
MaterialApp(
  theme: ThemeData.light(useMaterial3: true).copyWith(
      colorScheme: ColorScheme.light(
      primary: Colors.purple,
      primaryVariant: Colors.deepPurple,
      secondary: Colors.pink,
      secondaryVariant: Colors.red,
      background: Colors.white,
      surface: Colors.grey[50],
      onPrimary: Colors.white,
      onSecondary: Colors.black,
      onBackground: Colors.black,
      onSurface: Colors.black,
      onError: Colors.white,
    ),
    primaryColor: Colors.purple,
    scaffoldBackgroundColor: Colors.grey[200],
  ),
  home: MyApp(),
);
```

Dessa forma, o aplicativo utilizará o Material 3 e os widgets padrão (como os widgets `AppBar`, `Button`, `Text`, entre outros) terão sua aparência alterada de acordo com o esquema de cor definido.

# Vantagens

Para garantir uma estilização consistente e manutenível em seu aplicativo, é importante evitar a tentação de criar estilos "do zero" diretamente nos widgets. 

A classe `ThemeData` é uma das formas mais simples e eficientes de estilizar o seu aplicativo `Flutter`. Dessa forma, você pode ter certeza de que está aproveitando todas as propriedades importantes e garantindo a consistência visual em todo o seu aplicativo. Além disso, utilizar o `ThemeData` também torna mais fácil alterar a aparência do seu aplicativo em um único lugar, em vez de ter que fazer alterações individuais em cada widget.

### Pontos principais:

**Consistência visual:** Ao definir os estilos em um único lugar, é mais fácil garantir que todo o seu aplicativo tenha uma aparência consistente e coerente. Isso é especialmente importante para aplicativos com muitos widgets diferentes e complexos.

**Dark e light modes**: Permite que você defina estilos específicos para o modo claro e escuro, o que é útil se o seu aplicativo oferecer a opção de alterar o modo de exibição para o usuário. Dessa forma, é mais fácil garantir que o aplicativo tenha uma aparência consistente em ambos os modos, sem precisar definir estilos separadamente em cada widget.

**Alterar o tema atual**: Se você precisar alterar o tema atual do aplicativo (por exemplo, se o usuário alterar as preferências de tema), é mais fácil fazer isso ao utilizar o `ThemeData`, pois você só precisa alterar os estilos em um único lugar. Fora os `if` :P.


É isso! Valeu!