Change color border of TextField when it has value

Question

I have a TextField code below.

                 TextField(
                    ...
                    controller: controller,
                    decoration: InputDecoration(
                      enabledBorder: UnderlineInputBorder(
                          borderSide: BorderSide(color: Colors.white)),
                      //change to blue
                      focusedBorder: UnderlineInputBorder(
                          borderSide: BorderSide(color: Colors.red, width: 5)),
                      hintText: '',
                    ),
                    keyboardType: TextInputType.number,
                    onChanged: (text) {
                      if (text != "") {
                       //change 'borderSide' from 'Colors.white' to 'Colors.blue'
                      } 
                    },
                  ),
                ),
                Container(
                    ...
                    color: Colors.red, 
                    //change to blue
                 ),

When user type a value, the border of TextField will change color style.

I want to change a border borderSide of TextField from Colors.white to Colors.blue OR color of Container from Colors.red to Colors.blue when TextField has value (text != "").

How Can I do that ?

Answer 1

You can add a variable color to the main widget's state to hold the color for the Container and the border of TextField:

Color _color = Colors.red;

Then you can toggle its value when the text is changed(onChanged):

TextField(
                    controller: controller,
                    decoration: InputDecoration(
                      enabledBorder: UnderlineInputBorder(
                          borderSide: BorderSide(color: Colors.white)),
                      focusedBorder: UnderlineInputBorder(
                          borderSide: BorderSide(color: _color, width: 5)),
                      hintText: '',
                    ),
                    keyboardType: TextInputType.number,
                    onChanged: (text) {
                      setState(() {
                        if (text.length > 0) {
                          _color = Colors.blue;
                        } else {
                          _color = Colors.red;
                        }
                      });
                    },
                  ),
                ),
                Container(height: 300, color: _color),