Change background color on TextField when focused

Question

I have a form with lots of input fields. I would like to change the background color when a TextField has focus:

This is my TextField:

TextFormField(
                focusNode: _textFieldFocus,
                decoration: InputDecoration(
                  labelText: 'Input test',
                  filled: true,
                  focusedBorder: UnderlineInputBorder(
                    borderSide: BorderSide(color: Colors.blue, width: 3),
                  ),
                ),
              ),

I´ve searched some time for a solution, but it seems that you have to wrap the TextField in a stateful widget that uses a FocusNode. Seen in this post for an example: How to change TextFiled widget background color when focus

I am not too keen on this solution, because I have a lot of text fields, and I think it is unnecessary to create stateful instances for each "dumb" text input I have. I would prefer if there was a focusBackgroundColor property or alike. So is there an easier solution than wrapping a TextField in a stateful widget?

Answer 1

Add a listener on FocusNode to use setState for UI update. to change color we can use fillColor: _textFieldFocus.hasFocus? Colors.purple: null fillColor: _textFieldFocus.hasFocus? Colors.purple: null , modify the color you want.

late final _textFieldFocus = FocusNode()
  ..addListener(() {
    setState(() {});
  });
@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Column(
      children: [
        TextFormField(
          focusNode: _textFieldFocus,
          decoration: InputDecoration(
            fillColor: _textFieldFocus.hasFocus ? Colors.purple : null,
            labelText: 'Input test',
            filled: true,
            focusedBorder: UnderlineInputBorder(
              borderSide: BorderSide(color: Colors.blue, width: 3),
            ),
          ),
        ),
      ],
    ),