Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

(Flutter) TextFormField Change labelColor on Focus

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:

enter image description here

enter image description here

like image 267
Bnd10706 Avatar asked Jun 02 '19 01:06

Bnd10706


People also ask

How do you turn off focus on TextFormField in Flutter?

TextField and TextFormField both have an argument called enabled. You can control it using a boolean variable. enabled=true means it will act as an editing text field whereas enabled=false will Disable the TextField Widget.


3 Answers

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.

like image 114
Adrian Murray Avatar answered Oct 12 '22 16:10

Adrian Murray


The Summary

You might want to check out Flutter Cookbook's Focus and text fields recipe.

Essentially, we have to:

  1. Create a FocusNode property.
  2. Add initialization and disposal to it.
  3. Add it to the TextFormField.
  4. Add a focus request on every tap on the TextFormField.

1. Create a FocusNode property

class CustomTextFormFieldState extends State<CustomTextFormField> {
  FocusNode _focusNode;
  ...

2. Add initialization and disposal to it

@override
void initState() {
  super.initState();
  _focusNode = FocusNode();
}

@override
void dispose() {
  _focusNode.dispose();
  super.dispose();
}

3. Add it to the TextFormField

@override
Widget build(BuildContext context) {
  return TextFormField(
    focusNode: _focusNode,
    ...

4. Add a focus request on every tap on the TextFormField

Don't forget to use setState:

void _requestFocus(){
  setState(() {
    FocusScope.of(context).requestFocus(_focusNode);
  });
}

Add the method to the TextFormField's onTap property:

@override
Widget build(BuildContext context) {
  return TextFormField(
    focusNode: _focusNode,
    onTap: _requestFocus,
    ...
like image 21
Philippe Fanaro Avatar answered Oct 12 '22 17:10

Philippe Fanaro


Use themes, this would only have to be done once in a central place:

inputDecorationTheme: InputDecorationTheme(
      floatingLabelStyle: TextStyle(color: Colors.blue),
    ),
like image 23
wamae Avatar answered Oct 12 '22 17:10

wamae