change suffixIcon color on focus Flutter

user_15823478 0
Viewed 423

I am trying to make a login ui in flutter. I have a suffixicon decoration in TextFormField. I need to set it's color then change it later when the TextFormField is in a focused state

I tried giving color to the icon, but it stays constant, I also tried with theme, but since i am new i got lost.

dartpad link

flutter widget
2 Answers

use focus property of TextFormField to achieve your result

FocusNode focus = FocusNode();
  
  @override
  Widget build(BuildContext context) {
    
    return TextFormField(
      focusNode: focus,
      onTap: () {
          FocusScope.of(context).requestFocus(focus);
      },
      keyboardType: TextInputType.emailAddress,
      decoration: InputDecoration(
        suffixIcon: Icon(
          Icons.search,
          color: focus.hasFocus ? Colors.red : Colors.green,
        ),
      ),
    );
  }
user_145331260 
 Color suffixColor = Colors.grey;

    Focus(
            onFocusChange: (hasFocus) {
              setState(() {
                (hasFocus)
                    ? suffixColor = Colors.red
                    : suffixColor = Colors.grey;
              });
            },
            child: TextFormField(
              decoration: InputDecoration(
                suffixIcon: Icon(
                  Icons.monetization_on,
                  color: suffixColor,
                ),
              ),
            ),
user_158077800
Related