Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

change unfocused text field icon Color through app themeData

Tags:

flutter

i want to change the unfocused Text field icon color.

through primary color i can change the focused icon color like the 2nd text field, i want to change the first one (the not clicked one).

i want to change it in the whole app, so i am using ThemeData in my main MaterialApp

ex: i want the unfocused text field icon color be purple and the focused one be red.

enter image description here

UPDATE: 08/JUN/19 i made an issue for flutter team as i thought this needs to be in flutter framework itself not a workaround it with foucs node Issue Link and looks like there is an PR for it PR Link

like image 352
Saifallak Avatar asked Oct 29 '25 02:10

Saifallak


1 Answers

By using a FocusNode to determine when the TextField is unfocused, and then assign the color you desire to Icon() of prefixicon, and when focused show the default theme color :

FocusNode fieldNode = FocusNode();
Container(
  padding: EdgeInsets.only(bottom: 20.0),
  child: TextField(
    focusNode: fieldNode,
    textAlign: TextAlign.start,
    decoration: InputDecoration(
        hintText: 'account',
        labelText: 'Label',
        hasFloatingPlaceholder: true,
        prefixIcon: Icon(Icons.account_circle,
            color: fieldNode.hasFocus
                ? Theme.of(context).primaryColor
                : Colors.purple)),
    keyboardType: TextInputType.text,
    textCapitalization: TextCapitalization.words,
    controller: firstNameController,
  ),
),
like image 144
Mazin Ibrahim Avatar answered Oct 30 '25 18:10

Mazin Ibrahim



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!