CODEWITHSUNDEEP
flutterandroid-studiodart
Someone
Someone

Reputation: 31

Changing the unfocused text field to white in flutter

So, I have this piece of code. I am trying to do a dark theme with fuschia accents. I have a text-field that is grey in color when unfocused and fuschia when focused. How do I make it white in color when in unfocused state?

  @override Widget getBody() {
return new Theme(
  data: new ThemeData(
    primaryColor: Color(0xffde0486),
    primaryColorDark: Color(0xfffdfcfd),
  ),
  child: Padding(
    padding: const EdgeInsets.all(8.0),
    child: TextField(
      decoration: InputDecoration(
        suffixText: 'Rs',
        suffixStyle: TextStyle(
          color: Color(0xffde0486),
        ),
        labelText: 'Cash',
        helperText: 'Nisab Amount is Rs 30,000',
        helperStyle: TextStyle(color: Colors.white70),
        prefixIcon: Icon(Icons.attach_money),
        // icon: Icon(Icons.mail),

        border: OutlineInputBorder(),
      ),
      keyboardType: TextInputType.emailAddress,
      textInputAction: TextInputAction.done,
      style: TextStyle(color: Color(0xffde0486)),
      autofocus: true,
    ),
  ),
);

}

The text field when in focus

Upvotes: 0

Views: 461

Answers (2)

Huthaifa Muayyad
Huthaifa Muayyad

Reputation: 12353

You need to take advantage of what is called a 'Focus Node'. First create a focus node, then initiate it and when the widget is done you need to dispose of it to avoid memory leaks. In textFields, there is a focus node property, similar to textEditingController property, but focus node takes care of your problem and manages when the field is focused.

// Define the focus node. To manage the lifecycle, create the FocusNode in
  // the initState method, and clean it up in the dispose method.
  FocusNode myFocusNode = FocusNode();

  @override
  void initState() {
    super.initState();

    myFocusNode = FocusNode();
  }

  @override
  void dispose() {
    // Clean up the focus node when the Form is disposed.
    myFocusNode.dispose();

    super.dispose();
  }

Then in your textField

  TextField(
    focusNode: myFocusNode,//added the focus node here
    decoration: InputDecoration(
    suffixText: 'Rs',
    suffixStyle: TextStyle(
      color: Color(0xffde0486),
    ),
    labelText: 'Cash',
    helperText: 'Nisab Amount is Rs 30,000',
//and here you can detirmine what color should it be depending on the state of th focus node
    helperStyle:TextStyle(color: myFocusNode.hasFocus?  Colors.white70: Colors.grey),
    prefixIcon: Icon(Icons.attach_money),
    // icon: Icon(Icons.mail),

    border: OutlineInputBorder(),
  ),
  keyboardType: TextInputType.emailAddress,
  textInputAction: TextInputAction.done,
  style: TextStyle(color: Color(0xffde0486)),
  autofocus: true,
)

Read more about it here. But this will solve your issue.

Upvotes: 2

Sahil Hariyani
Sahil Hariyani

Reputation: 1178

You can use FocusNode to determine when the TextField is unfocused, and then assign the color you desire TextField using ternary condition.

FocusNode fieldNode = FocusNode();

@override
Widget getBody() {
return new Theme(
data: new ThemeData(
  primaryColor: Color(0xffde0486),
  primaryColorDark: Color(0xfffdfcfd),
),
child: Padding(
  padding: const EdgeInsets.all(8.0),
  child: TextField(
    focusNode: fieldNode,
    decoration: InputDecoration(
      suffixText: 'Rs',
      suffixStyle: TextStyle(
        color: Color(0xffde0486),
      ),
      labelText: 'Cash',
      helperText: 'Nisab Amount is Rs 30,000',
      helperStyle: TextStyle(color: Colors.white70),
      prefixIcon: Icon(Icons.attach_money),
      // icon: Icon(Icons.mail),

      border: OutlineInputBorder(),
    ),
    keyboardType: TextInputType.emailAddress,
    textInputAction: TextInputAction.done,
    style: TextStyle(color: fieldNode.hasFocus ? Color(0xffde0486) : Colors.white,
    autofocus: true,
  ),
),
);
}

Upvotes: 1

Related Questions