Alterar a cor do botão elevado no Flutter (Guia definitivo)

Publicado em por
Tempo de leitura: 6 minutes

O ElevatedButton é um dos widgets mais usados no Flutter. O ElevatedButton foi introduzido com o lançamento do Flutter v1.22 em outubro de 2020. Como foi lançado para resolver os problemas associados aos antigos botões Flutter, a maneira de alterar a cor do Elevated Button também mudou. Então, neste tutorial, vamos explorar como alterar a cor do botão elevado no Flutter com exemplos práticos.

 

O problema

Quando você adiciona um ElevatedButton em seu aplicativo, ele define a cor primarySwatch como a cor de fundo de um botão. Por exemplo, se você acabou de criar um novo aplicativo, poderá ver o ElevatedButton com o plano de fundo azul porque o primarySwatch está definido como Colors.blue.

Exemplo do Código:

MaterialApp(
  title: 'Flutter Demo',
  theme: ThemeData(
    primarySwatch: Colors.blue,
  ),
  home: ElevatedButtonColorDemo(),
);
ElevatedButton(
  onPressed: () {},
  child: const Text(
    'Elevated Button',
    style: TextStyle(fontSize: 40),
  ),
)

Saida:

Etapas para alterar a cor do botão elevado no Flutter

Você pode querer alterar a cor de fundo do botão Elevado enquanto mantém o PrimarySwatch em uma cor diferente.

Para alterar a cor do Botão Elevado no Flutter, basta definir a propriedade de estilo do Botão Elevado do método estático ElevatedButton.styleFrom() e definir a propriedade primária para a cor apropriada.

Aqui estão os passos:

Passo 1: adicione o widget ElevatedButton.
Passo 2: Adicione o parâmetro style (dentro de ElevatedButton) e atribua o ElevatedButton.styleFrom().

Passo 3: adicione o parâmetro primário (dentro de ElevatedButton.styleFrom) e atribua qualquer cor.

Passo 4: execute o aplicativo.

Exemplo de Código:

ElevatedButton(
  onPressed: () {},
  style: ElevatedButton.styleFrom(
    primary: Colors.black, // Background color
  ),
  child: const Text(
    'Elevated Button',
    style: TextStyle(fontSize: 40),
  ),
)

Saida:

Alterando a Cor do Texto do Botão Elevado

Às vezes, você também pode querer alterar a cor do texto do botão elevado. Você pode fazer isso apenas atribuindo a cor de sua escolha à propriedade onPrimary.

Aqui estão os passos:

  • Adicione o parâmetro style (dentro de ElevatedButton) e atribua o ElevatedButton.styleFrom().
  • Adicione o parâmetro onPrimary (dentro de ElevatedButton.styleFrom) e atribua qualquer cor.
  • Execute o aplicativo.

Exemplo de Código:

ElevatedButton(
  onPressed: () {},
  style: ElevatedButton.styleFrom(
    primary: Colors.black, // Background color
    onPrimary: Colors.amber, // Text Color (Foreground color)
  ),
  child: const Text(
    'Elevated Button',
    style: TextStyle(fontSize: 40),
  ),
)

Saida:

Alterando a cor do botão elevado ao pressionar

Para alterar a cor do botão Elevado no pess, você pode usar o widget ButtonStyle. Dentro do widget ButtonStyle, você pode adicionar a propriedade overlayColor e atribuir a cor com base no estado, como ao pressionar, ao passar o mouse e ao focalizar.

Veja como você faz isso:

  • Adicione o widget ElevatedButton.
  • Adicione o parâmetro overlayColor (dentro de ElevatedButton) e atribua o aterialStateProperty.resolveWith().
  • Verifique se o state está pressed, se sim, execute novamente a cor de sua escolha.

Exemplo de Código:

ElevatedButton(
  onPressed: () {},
  style: ButtonStyle(
    overlayColor: MaterialStateProperty.resolveWith<Color?>(
      (Set<MaterialState> states) {
        if (states.contains(MaterialState.pressed))
          return Colors.redAccent; //<-- SEE HERE
        return null; // Defer to the widget's default.
      },
    ),
  ),
  child: const Text(
    'Elevated Button 1',
    style: TextStyle(fontSize: 24),
  ),
)

Saida:

 

Alterando a cor do botão elevado ao passar o mouse

Para alterar a cor do botão Elevado ao passar o mouse, você pode usar o widget ButtonStyle. Dentro do widget ButtonStyle, você pode adicionar a propriedade overlayColor e atribuir a cor com base no estado, como ao pressionar, ao passar o mouse e ao focalizar.

Veja como você faz isso:

  • Adicione o widget ElevatedButton.
  • Adicione o parâmetro overlayColor (dentro de ElevatedButton) e atribua o aterialStateProperty.resolveWith().
  • Verifique se o estado está pairado, se sim, execute novamente a cor de sua escolha.

Code Example

ElevatedButton(
              onPressed: () {},
              style: ButtonStyle(
                overlayColor: MaterialStateProperty.resolveWith<Color?>(
                  (Set<MaterialState> states) {
                    if (states.contains(MaterialState.hovered))
                      return Colors.redAccent; //<-- SEE HERE
                    return null; // Defer to the widget's default.
                  },
                ),
              ),
              child: const Text(
                'Elevated Button 1',
                style: TextStyle(fontSize: 24),
              ),
            ),

Saida

 

Alterar a cor da sombra do botão elevado

Se você estiver projetando seu aplicativo para ser totalmente compatível com as diretrizes da sua marca, também poderá alterar a cor da sombra do botão elevado. Para alterar a cor da sombra, seu botão deve ser elevado primeiro.

Vamos ver como alterar a cor da sombra:

  • Dentro do Botão Elevado, adicione a propriedade de elevation e defina-a como 20.
  • Agora adicione a propriedade shadowColor (dentro do botão Elevated) e defina-a para a cor que você deseja como cor de sombra.
  • Execute o aplicativo.

Exemplo de Código:

ElevatedButton(
  onPressed: () {},
  style: ElevatedButton.styleFrom(
    primary: Colors.black,
    onPrimary: Colors.amber,
    elevation: 20,  // Elevation
    shadowColor: Colors.amber, // Shadow Color
  ),
  child: const Text(
    'Elevated Button',
    style: TextStyle(fontSize: 40),
  ),
)

Saida:

Personalize a cor do botão elevado para desabilitar o estado

Quando o botão está desabilitado, por padrão ele mostra a cor cinza. Para alterar a cor de desabilitação do Botão Elevado:

  • Basta adicionar a propriedade onSurface dentro do Botão Elevado e definir a cor apropriada.

Exemplo de Código

ElevatedButton(
  onPressed: null,
  style: ElevatedButton.styleFrom(
    primary: Colors.black,
    onPrimary: Colors.amber,
    onSurface: Colors.amber, // Disable color
  ),
  child: const Text(
    'Elevated Button',
    style: TextStyle(fontSize: 40),
  ),
)

Dica: Certifique-se de passar o null para a propriedade onPressed ao testar a cor de desativação.

Saida:

Alterando a Cor da Borda do Botão Elevado

Caso você queira ter uma borda ao redor do Botão Elevado e alterar a cor dele, veja como você faz isso:

  • Adicione a propriedade side e defina o BorderSide().
  • Dentro do BorderSide() adicione a propriedade width e color e atribua a cor apropriada.

Exemplo de Código:

ElevatedButton(
  onPressed: () {},
  style: ElevatedButton.styleFrom(
    primary: Colors.black,
    onPrimary: Colors.amber,
    side: BorderSide(color: Colors.red, width: 5),
  ),
  child: const Text(
    'Elevated Button',
    style: TextStyle(fontSize: 40),
  ),
)

Saida:

Gerenciando a cor do botão elevado no nível do aplicativo

Alterar a cor de cada botão elevado em seu aplicativo não é uma solução escalável. E se a marca do seu aplicativo for alterada. Você gostaria de ficar sentado por longas horas procurando por todos os botões e substituindo-os por novas cores? Claro que não. Vamos ver como você pode definir o tema do Botão Elevado no nível do aplicativo. Isso fará com que todos os botões elevados do seu aplicativo tenham a mesma aparência e você possa alterá-los instantaneamente.

Aqui estão os passos:

  • Vá para o seu arquivo main.dart.
  • Dentro do MaterialApp, encontre o widget ThemeData.
  • Adicione a propriedade HigherButtonTheme dentro e atribua o ElevatedButtonThemeData().
  • Adicione a propriedade style e altere a cor como você alteraria para ElevatedButton normal.
  • Coloque o widget ElevatedButton em qualquer lugar do seu aplicativo Flutter e veja.

Exemplo de Código:

MaterialApp(
  title: 'Flutter Demo',
  theme: ThemeData(
    primarySwatch: Colors.blue,
    elevatedButtonTheme: ElevatedButtonThemeData(
      style: ElevatedButton.styleFrom(
        primary: Colors.greenAccent, // background (button) color
        onPrimary: Colors.black, // foreground (text) color
      ),
    ),
  ),
  home: ElevatedButtonColorDemo(),
);
@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: ...
      backgroundColor: const Color(0xff6ae792),
    ),
    body: Center(
      child: Column(
        children: [
          SizedBox(
            height: 50,
          ),
          ElevatedButton(
            onPressed: () {},
            child: const Text(
              'Elevated Button 1',
              style: TextStyle(fontSize: 24),
            ),
          ),
          ElevatedButton(
            onPressed: () {},
            child: const Text(
              'Elevated Button 2',
              style: TextStyle(fontSize: 24),
            ),
          ),
          ElevatedButton(
            onPressed: () {},
            child: const Text(
              'Elevated Button 3',
              style: TextStyle(fontSize: 24),
            ),
          )
        ],
      ),
    ),
  );
}

Saida:

É isso. Obrigado!

Conclusão

Neste tutorial, aprendemos como alterar a cor do botão elevado no Flutter. Também exploramos como alterar a cor do plano de fundo e do texto, cor da sombra, cor da borda, cor do estado desabilitado com exemplos práticos. Por fim, aprendemos como definir cores para todos os botões elevados dentro do nosso aplicativo a partir de um único local.

 
Twittar
Compartilhar
Compartilhar
0 Compart.