Flutter: Construindo apps temáticas!

O Flutter é 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:

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, 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:

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!