change unfocused text field icon Color through app themeData

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

1 answer

  • answered 2019-05-21 12:55 Mazin Ibrahim

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