Изменить цвет границы TextField, когда он имеет значение - PullRequest
Новая
       6

Изменить цвет границы TextField, когда он имеет значение

0 голосов
/ 05 августа 2020

У меня есть код TextField ниже. 

                 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
                 ),

Когда пользователь вводит значение, граница TextField меняет цветовой стиль.

Я хочу изменить границу borderSide из TextField от Colors.white до Colors.blue ИЛИ color из Container от Colors.red до Colors.blue, когда TextField имеет значение (text != "").

Как я могу это сделать?

1 Ответ

3 голосов
/ 05 августа 2020

Вы можете добавить переменную color в состояние основного виджета, чтобы сохранить цвет для Container и границы TextField: 

Color _color = Colors.red;

Затем вы можете переключать ее значение, когда текст изменен (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),
...