Flutter change focus color and icon color but not works

Question

Change focus color and icon color but not work

TextFormField(
              cursorColor: Colors.red[600],
              decoration: const InputDecoration(
                border: UnderlineInputBorder(),
                filled: false,
                iconColor: Colors.red,
                focusColor: Colors.red,
                icon: Icon(Icons.phone),
                hintText: 'Where can we reach you?',
                labelText: 'Phone Number *',
                prefixText: '+86',
              ),
              keyboardType: TextInputType.phone,
              onSaved: (String? value) {
                this._phoneNumber = value;
                print('phoneNumber=$_phoneNumber');
              },
              // TextInputFormatters are applied in sequence.
              inputFormatters: <TextInputFormatter>[
                FilteringTextInputFormatter.digitsOnly
              ],
            ),

I have changed the focus color and icon color to red. I do hot restart but the output still is blue. My theme primary color is also red.

theme: ThemeData(primaryColor: Colors.red, fontFamily: 'Poppins'),

What is the problem? Here are the current output.

Answer 1

Try using FocusNode .

  late FocusNode focusNode = FocusNode()
    ..addListener(() {
      setState(() {});
    });

TextFormField(
  focusNode: focusNode,
  cursorColor: Colors.red[600],
  decoration: InputDecoration(
    icon: Icon(
      Icons.phone,
      color: focusNode.hasFocus ? Colors.red : Colors.grey,
    ),
  ),

Also, dispose the focus node

  @override
  void dispose() {
    focusNode.dispose();
    super.dispose();
  }

More about FocusNode

Answer 2

From the offical documentation this is available:

This sample shows how to style a TextField with a prefixIcon that changes color based on the MaterialState through the use of ThemeData.

Your code could therefore be:

Theme(
  data: Theme.of(context).copyWith(
    inputDecorationTheme: Theme.of(context).inputDecorationTheme.copyWith(
      iconColor: MaterialStateColor.resolveWith((Set<MaterialState> states) {
        if (states.contains(MaterialState.focused)) {
          return Colors.red;
        }
        if (states.contains(MaterialState.error)) {
          return Colors.deepOrange;
        }
        return Colors.grey;
      }),
    ),
  ),
  child: TextFormField(
    cursorColor: Colors.red[600],
    decoration: const InputDecoration(
      border: UnderlineInputBorder(),
      filled: false,
      icon: Icon(Icons.phone),
      hintText: 'Where can we reach you?',
      labelText: 'Phone Number *',
      prefixText: '+86',
    ),
    keyboardType: TextInputType.phone,
    onSaved: (String? value) {
      this._phoneNumber = value;
      print('phoneNumber=$_phoneNumber');
    },
    // TextInputFormatters are applied in sequence.
    inputFormatters: <TextInputFormatter>[
      FilteringTextInputFormatter.digitsOnly
    ],
  ),
),

The good thing with this is that you can, if you want, set this inputDecorationTheme to be applied for the entire app just once using the theme property on the MaterialApp widget, and will be applied everywhere.

Answer 3

If you wish to change the color of Icon on focus then you can use this instead

Color iconColor = Colors.grey;//add this as a variable

//use the focus widget in place of your textfield.
 Focus(
     onFocusChange: (hasFocus)
        {
         if(hasFocus)
             {
               iconColor = Colors.red;
              }
         else{
                iconColor = Colors.grey;
             }
             setState((){});
           },
          child: TextField(
             decoration: InputDecoration(prefix: Icon(Icons.phone, color: iconColor,)),
            ),
      ),