Flutter: Temas e Cores

Resumão

Para você que não tem muito tempo: esse artigo explica como estilizar seu aplicativo, usando temas, no Flutter 2.0. Sim, o Flutter mudou! E agora é hora de atualizar nossos conhecimentos também.

No topo, à esquerda, vemos o símbolo do Flutter e do Dart. Em seguida, temos três celulares, cada um com um tema de cores diferentes. O primeiro celular tem um tema com padrão azul e laranja, o segundo tem um tema escuro com preto e lilás, e, o terceiro, um tema customizado com opções de cores primárias.

E o que vamos fazer?

Alterar o estilo do AppBar();
Mudar a fonte dos Textos;
Mudar formato e cor do FloatingActionButton().

E porque isso é importante?

Entender um pouquinho sobre Theme e ThemeData vai facilitar seu trabalho quando tiver que criar uma identidade visual para os aplicativos que estão na sua fila de demandas. Ou seja, trabalhe com conforto e inteligência!
E claro, não podemos esquecer do Plano dos Desenvolvedores de Flutter que querem… Opa quase te dei spoiler ! Você vai ter que ler até o final pra saber isso :)

Introdução

Você aí, que já começou a fazer aplicativos com Flutter e agora quer que eles fiquem elegantes e bonitos, mas tem um pequeno problema:

Muito difícil deixar meu app bonito!

O design pediu muitos detalhes!

Não tema, porque o Theme está aqui para te ajudar! Com poucas linhas de código, você será capaz de alterar as cores de diversos Widgets, mantendo o alinhamento de cores e a identidade do seu aplicativo!

Essa é uma novidade que o Flutter 2.0 traz para a gente! E é bem importante aprender sobre o Theme, já que o primaryColor, o accentColor perderam espaço nessa atualização (e falaremos sobre isso mais para frente, ok?).

Vamos conhecer o Theme, então?

Theme

Quando você pensa em mudar a cor de um, você tem que procurar a propriedade de cores e alterar cada widget, um por um… Seu aplicativo pode ter centenas de componentes e lá está você, pintando cada um deles, como se fosse um livro de colorir.

À esquerda, temos 5 lápis coloridos e,no centro, vemos uma mão pintando uma forma geométrica com o lápis roxo.

Todos nós já passamos por isso, não é mesmo? Bom, você não precisa sofrer mais com esse problema.

O Theme é uma classe disponibilizada pelo Flutter, que certifica que todos os seus widgets descendentes recebam as cores indicadas por você. Com o auxílio do ThemeData, ele sabe qual widget recebe qual cor. Demais não é?

Exemplo

Você tem um aplicativo simples:

Imagem de Projeto padrão de Flutter, com barra de cabeçalho azul, uma mensagem e um número no centro, e um botão redondo e azul no fundo à direita.

E deseja adicionar uma identidade visual nova nele:

Imagem de projeto padrão de Flutter, mas agora estilizado, com uma barra de cabeçalho azul índigo, uma mensagem em itálico, um número no centro em negrito e em cor azul índigo, e um botão quadrado e amarelo no fundo à direita.

Como usar

Primeiro, é importante dizer que estou usando o projeto padrão do Flutter: o contador. Para obter esse projeto, basta criar um novo projeto Flutter, e pronto, o código que você encontrará na main.dart é tudo que precisamos :).

Em segundo lugar, para usar o Theme, é necessário usar o MaterialApp como "progenitor" do seu aplicativo. Assim, ele será capaz de passar o tema para todos os widgets “filhos”:

MaterialApp(
      title: 'Theme Demo',
      theme: tema,
      home: const MyHomePage(title: 'Theme Demo'),
    );

Nossa sorte, é que o projeto Contador já vem com o MaterialApp()! Mas, caso seu projeto pessoal não possua ele, você precisa colocar, okay?

Agora, nós precisamos criar um tema, e é aí que começa a parte divertida.

Criando o Tema

Para fazer o tema, crie um novo arquivo chamado theme.dart e inclua um tema que receberá um ThemeData():

final tema = ThemeData();

Nosso tema ainda está vazio, certo? Mas, para que possamos usá-lo devidamente, eu quero que você entenda um pouco mais sobre o ThemeData().

O ThemeData é uma classe em que você pode configurar as cores, formatos e estilos dos widgets. Existem mais de 71 propriedades diferentes, cada uma delas designada para um widget específico.

Neste artigo, vamos nos concentrar em três propriedades do ThemeData:

appBarTheme;
floatingActionButtonTheme;
textTheme.

Para começar, vamos mexer no estilo do AppBar().

Estilo: AppBar()

Uma das muitas propriedades dentro do ThemeData() é o appBarTheme. Para usá-la, precisamos de um novo widget AppBarTheme():

O AppBarTheme é uma classe em que você pode configurar os diversos estilos disponiveis dentro de um AppBar.

Vou alterar apenas a cor de fundo do nosso AppBar e o estilo do texto:

appBarTheme: const AppBarTheme(
    backgroundColor: Color.fromARGB(250, 26, 35, 126),
    titleTextStyle: TextStyle(
      fontSize: 20,
      fontWeight: FontWeight.bold,
      color: Colors.white,
    ), //TextStyle
  ), //AppBarTheme

GIF com o AppBar alterando a cor e o estilo de texto, do azul claro para o azul índigo.

Como pode ver, nosso appBar mudou. Isso significa que todo appBar que você construir dentro do nosso aplicativo vai ter essa configuração!

Mas, Kako, e se eu quiser que um AppBar específico tenha um estilo diferente, como eu faço?

Simples! Quando você quiser que um AppBar() tenha um estilo diferente, basta alterar o estilo daquele appBar() quando você o cria:

Scaffold(
      appBar: AppBar(
       backgroundColor: Colors.red,
        title: Text(widget.title),
      ),

E isso vale para qualquer Widget, não apenas para o AppBar()!

Agora, vamos dar uma olhadinha no nosso FloatingActionButton()?

Estilo: FloatingActionButton()

Outra propriedade que encontramos dentro do ThemeData() é o floatingActionButtonTheme. Para usá-lo, também precisaremos de um novo widget FloatingActionButtonTheme():

O FloatingActionButtonTheme é uma classe em que você pode configurar os diversos estilos disponiveis dentro de um FloatingActionButton.

Nesse aqui, eu quero alterar mais coisas. Vamos mexer na cor de fundo , na cor do primeiro plano, no formato e na elevação:

floatingActionButtonTheme: const FloatingActionButtonThemeData(
    backgroundColor: Color.fromARGB(250, 255, 179, 0),
    foregroundColor: Colors.white,
    shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(2.0)),
),
    elevation: 10,
  ),

GIF com o FloatingActionButton alterando a cor, do azul para o amarelo âmbar, e o formato, do redondo para o quadrado.

Como você pode ver, nosso floatingActionButton mudou bastante, e ele vai seguir esse mesmo padrão em todo seu aplicativo.

Mas, Kako, de onde você tirou essas cores?

Ah! Você tem um bom olho, hein? A cor Color.fromARGB(250, 26, 35, 126) é o Azul Índigo e é a cor de fundo da Alura! Já a cor Color.fromARGB(250, 255, 179, 0) é o Amarelo mbar, usado pela escola Mobile. Legal, né?

Estilo: Textos

A última alteração que eu quero comentar aqui é sobre os textos no nosso aplicativo.

Uma das propriedades do ThemeData() é o textTheme, responsável por padronizar todos os textos disponíveis. Para usá-lo, também precisaremos de um novo widget TextTheme():

O TextTheme é uma classe em que você pode configurar os diversos tamanhos, cores e grossuras disponiveis dentro de um texto.

Antes de alterar alguma coisa, eu sugiro que você dê uma olhadinha rápida no link do TextTheme, para que visualize o que é H1, H2 etc.

Bom, agora que você bateu o olho nas diferentes categorias de textos (olhou né? Estou confiando!), eu quero alterar o H4 e o Body2, específicamente:

textTheme: const TextTheme(
      bodyText2: TextStyle(
            color: Colors.black, 
fontStyle: FontStyle.italic,
fontSize: 20),
      headline4: TextStyle(
            color: Color.fromARGB(250, 26, 35, 126),
fontWeight: FontWeight.bold, 
fontSize: 40),
),

GIF com um texto e um número centralizado, o número é aumentado até o 5. Após isso, ele muda de estilo para um texto maior, em itálico, e um número maior, em negrito, e na cor azul índigo.

MAS, KAKO porque você decidiu mudar só o bodyText2 e o headline4?

Inicialmente, todo widget Text usa o padrão Body 2, então, para mudar o texto no meio do aplicativo, precisávamos mudar essa categoria.

Já o número que encontramos no centro da tela, ele segue a categoria H4, e como eu sei isso? ,quando olhamos lá no main.darte procuramos pelo widget Text(), que corresponde ao número, vemos na linha 93:

Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),

Isso significa que o Text() já estava procurando pelo estilo headline 4.

Conclusão

Agora já sabemos como alterar o estilo dos Widgets no nosso aplicativo sem ter que ir individualmente em cada um deles. Usando as propriedades disponíveis no nosso ThemeData podemos definir globalmente a aparência dos Widgets que usamos.

Kako, eu tenho uma última dúvida: Antes, eu podia apenas definir o primaryColor, o accentColor e pronto, o que aconteceu?

Antes do Flutter 2.0, isso funcionava, é verdade. Mas agora (em 2021) o accentColor, foi depreciado e a forma de lidar com as cores ficou mais individual. O que aconteceu foi que os Desenvolvedores do Flutter têm um plano para organizar melhor a padronização dos Themes, e você pode ler tudo sobre isso aqui: Material Theme System Updates.

O que você achou?

Eu sei, eu sei, esse Artigo é tão curtinho! Dá vontade de saber mais não é?

Eu queria colocar mais conteúdo sobre cores primárias e secundárias para que você possa se comunicar com mais facilidade com seu Designer e não sofrer tanto na hora de produzir um aplicativo bonito, mas a última coisa que eu queria era um artigo gigantesco, então, caso você tenha interesse em mais artigos sobre esse Tema, basta me pedir aqui: LinkedIn do Kako .

Gostou desse artigo?

Escreva nos comentários e nos ajude a melhorar sempre!

Um grande abraço!