Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Cores escuras no primarySwatch

Olá! Eu gostaria de colocar um verde ESCURO no primarySwatch do ThemeData, porém, fazendo algumas pesquisas descobri que isso parece inviável porque o primarySwatch pede um MaterialColor e o MaterialColor nao aceita "shades", que seriam os tons de uma cor! Mesmo assim, gostaria de saber se é possível fazer isso de alguma forma.

Segue o código:

class BytebankApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ListaTransferencias(),
      theme: ThemeData(
        primaryColor: Colors.green[900],
        accentColor: Colors.blueAccent[700],
        primarySwatch: Colors.green,
      ),
    );
  }
}
2 respostas
solução!

Fala Guilherme, tudo bom?

Uma possível saída é criar seu próprio MaterialColor! Saca como:

Você vai usar o MaterialColor(int, Map<int,color>), o que ele pede é apenas um inteiro que representa o valor da cor primaria e um Map<int,color> com as cores que você quer usar. Algo tipo essa brincadeira que eu fiz aqui:

primarySwatch: MaterialColor(
          0xFF1B5E20,
          {
            50: Colors.green[500],
            100: Colors.green[600],
            200: Colors.green[700],
            300: Colors.green[800],
            500: Colors.green[900],
            600: Colors.blue[500],
            700: Colors.blue[600],
            800: Colors.blue[700],
            900: Colors.blue[800],
          },
        ),

Duas observações:

  1. Quando for criar um MaterialColor personalizado, coloque os valores de 50 a 900 pra não dar nenhum problema em nenhum material depois.
  2. O valor que ele pede no int é como se fosse um hexadecimal da cor, o 0xFF equivale ao # e o que vem depois é o hexa normal. Então 0xFF1B5E20 equivale a #1B5E20.

Se você quiser descobrir o valor de uma cor específica que o Flutter já tem, basta pressionar Ctrl e clicar na cor:

Print do MaterialColor green do código interno do Flutter, nele vemos as cores em int de cada tom na MaterialColor


Uma curiosidade, já que você está na vibe de cores escuras, você pode criar um Tema Escuro para seu app. Basta adicionar as seguintes linhas no seu MaterialApp:

darkTheme: ThemeData(
        brightness: Brightness.dark,
      <o resto do ThemeData aqui>,
      ),
themeMode: ThemeMode.dark,

No mais é isso! Espero ter ajudado, e bons estudos!

Muito legal Ricarth! Obrigado!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software