How modify the highlight color of TextField when tapped ? (Flutter)

Question

I am trying to change my labelText color when focused. I can change the text color but not when focused. In the screenshots below, the string "Email" remains blue when focused.

This is what I have:

Container(
  margin: EdgeInsets.symmetric(horizontal: 600),
  child: TextField(
    decoration: InputDecoration(
      border: UnderlineInputBorder(),
      labelText: 'Email',
      suffix: Icon(
        Icons.check,
      ),
    ),
  ),
),
                  

This is what the button looks like before it's pressed.

When it's pressed, it looks like this

How can I modify these highlights to be black instead of light blue? Thanks!

Answer 1

Try to change your inputDecoration labelStyle:

InputDecorationTheme(
      labelStyle: TextStyle(
    color: black,
    fontSize: 12,
  );

Answer 2

There are 2 ways you can modify the TextField's highlight color:

1. Use InputDecoration (do this if you want to locally modify a single TextField )

Container(
  child: TextField(
    decoration: InputDecoration(
      focusedBorder: UnderlineInputBorder(
        borderSide: BorderSide(color: Colors.black),
      ),
      labelText: 'Email',
      labelStyle: TextStyle(color: Colors.black),
      suffix: Icon(
        Icons.check,
      ),
    ),
  ),
)

2. Config the theme property of the MaterialApp widget (do this if you want to set a common theme across all TextField widgets):

MaterialApp(
      theme: ThemeData(
          inputDecorationTheme: InputDecorationTheme(
        focusedBorder:
            UnderlineInputBorder(borderSide: BorderSide(color: Colors.black)),
        labelStyle: TextStyle(color: Colors.black),
      ),
   ),
   home: SomeScreen(),
);