CODEWITHSUNDEEP
flutterdartflutter-layoutflutter-textformfield
Roger Wong
Roger Wong

Reputation: 57

Flutter change focus color and icon color but not works

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.

Upvotes: 2

Views: 2715

Answers (3)

Robert Sandberg
Robert Sandberg

Reputation: 8607

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.

enter image description here

Upvotes: 2

Kaushik Chandru
Kaushik Chandru

Reputation: 17772

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,)),
            ),
      ),

Upvotes: 2

Md. Yeasin Sheikh
Md. Yeasin Sheikh

Reputation: 63649

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

Upvotes: 1

Related Questions