3
respostas

Como alterar a cor azul do TextField e Icon do Editor?

Boa tarde!

Procurei no google e stackoverflow mas não tenho muita expertise ainda com Flutter e Dart... Algumas soluções apresentadas não fizeram muito sentido para mim no contexto deste primeiro app, estou alterando as cores mas não consigo alterar daquele sublinhado e mesmo o label, que acabam ficando azul. Já tentei alterar diretamente propriedades no Editor, já tentei inserir no ThemaData da main, tentei também no Editor até mesmo em colocar border no InputDecoration com uma UnderlineInputBorder alterando a cor, mesmo assim nada...

Poderiam me auxiliar, por favor?

Sobre meu código, pode ser visto em https://github.com/AlineCruzDEV/bytebank

Fico no aguardo. Desde já agradeço

3 respostas

Olá Aline, O parâmetro border não funciona bem como o nome diz, segundo a documentação deste mesmo, ele utilizará apenas o shape, assim, para que você consiga obter uma cor especifica ou largura de borda veja os parâmetros enableBorder ou focusedBorder.

Para o label, basta apenas usar um TextStyle no labelStyle.

Segue abaixo o exemplo para ambos os casos

return TextField(
        controller: _valorController,
        style: TextStyle(
          fontSize: 24.0,
        ),
        decoration: InputDecoration(
          icon: _icone != null ? Icon(_icone) : null,
          labelText: _rotulo,
          hintText: _dica,
          labelStyle: TextStyle(
            fontSize: 50,
            color: Colors.pink,
          ),
          focusedBorder: UnderlineInputBorder(
              borderSide: BorderSide(
            color: Colors.red,
            width: 10,
          )),
          enabledBorder: UnderlineInputBorder(
              borderSide: BorderSide(
            color: Colors.green,
            width: 2,
          )),
        ),
        keyboardType: TextInputType.number);

imagem do resultado

Bons estudos.

Boa tarde, Joseildo! Desculpa a demora, só no fim de semana que mexo no projeto...

Bom, na verdade sobre o label eu vi a respeito tbem, havia conseguido mudar a cor numa das tentativas... rs... Mas tipo... o ícone, as linhas, até o cursor, tudo está tudo em azul, isso que eu queria alterar, achei que seria algo como a Accent no tema, sabe? Se tem algo que poderia mudar esse foco todo de uma vez, mas fiz várias tentativas e não encontrei.

De toda maneira já agradeço demais pelo que me enviou, a borda já consegui alterar com o seu código, mas o ícone e o cursor continuam em azul.

Vou continuar na busca aqui... Mais uma vez, obrigada!

Sobre a linha, resolvi como o Joseildo sugeriu.

Sobre o cursor, resolvi com textSelectionTheme assim:

class ByteBankApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primaryColor: Colors.redAccent[700],
        accentColor: Colors.red[900],
        elevatedButtonTheme: ElevatedButtonThemeData(
          style: TextButton.styleFrom(
            backgroundColor: Colors.red[900],
          ),
        ),
        textSelectionTheme:
            TextSelectionThemeData(cursorColor: Colors.redAccent),
      ),
      home: TransferList(),
    );
  }
}

Já o ícone, ainda sem conseguir resolver... tentei primaryIconTheme, accentIconTheme e iconTheme, nenhum funcionou. :(

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