I am trying to change my
labelText color when focused. I can change the text color but not when focused.
I have tried all the hint text colors and label text colors, but nothing helps.
Container( padding: EdgeInsets.fromLTRB(15, 10, 15, 0), child: TextFormField( cursorColor: Colors.lightGreen, keyboardType: TextInputType.phone, decoration: InputDecoration( labelText: 'Phone Number', hintText: 'Enter a Phone Number', focusedBorder: OutlineInputBorder( borderSide: BorderSide( color: Colors.lightGreen ) ), border: OutlineInputBorder( borderSide: BorderSide() ), ) ), ),
Here are images of what is happening:
You’d need to have a way determine its focus state and then create a conditional for its color based off of that. This is where a
focusNode would be helpful. Construct a new
FocusNode off the widget creation, use that as the
focusNode property in the
TextFormField. Then in color property of the
TextStyle property of the
TextFormField you could add something like:
FocusNode myFocusNode = new FocusNode(); ... return TextFormField( focusNode: myFocusNode, decoration: InputDecoration( labelText: 'test', labelStyle: TextStyle( color: myFocusNode.hasFocus ? Colors.blue : Colors.black ) ), );
EDIT : Just a quick note, you’ll probably need to make sure this is in a
StatefulWidget and then add a listener to the
focusNode you created and call
setState on any events on that
focusNode. Otherwise you wont see any changes.
Answered By – Adrian Murray
Answer Checked By – Mildred Charles (FlutterFixes Admin)