Измените цвет значка по умолчанию TextFormField с серого на любой, кроме основного цвета при выделении

Question

Я хочу изменить цвет значка TextFormField по умолчанию, который также получит изменения при выделении. Есть несколько способов изменить цвет, но ни один из них не работает для меня.

1. Установить цвет значка

При прямом изменении цвета значка, как показано ниже, при выборе цвет значка не меняется, ниже приведен код то же самое и скриншот, который показывает красный цвет, когда поле выбрано или не выбрано.

     TextFormField(
        maxLength: 15,
        decoration: InputDecoration(
          labelText: "USER NAME",
          prefixIcon: IconTheme(data: IconThemeData(
            color: Colors.redAccent
          ), child: Icon(Icons.email,))
        ),
        onSaved: (username) => _username = username,
      ),

2. Оставьте это значение по умолчанию

Это покажет серый цвет, когда поле не выбрано, и основной цвет, когда поле выбрано. Ниже скриншот того же. Здесь я хочу изменить цвет значка с серого на красный и показать основной цвет при выделении.

ПРИМЕЧАНИЕ: - Это будет хорошо, если мы сможем сделать это с помощью темы

Answer 1

Если вы хотите изменить цвет значка во время выбора textFormField,
измените его в соответствии с нижеприведенным описанием.

...
            Theme(
              child: Column(
                children: <Widget>[
                  TextFormField(
                    maxLength: 15,
                    decoration: InputDecoration(
                        labelText: "USER NAME",
                        prefixIcon: Icon(Icons.email,)
                    ),
                    onSaved: (username) => _username = username,
                  ),
                  TextFormField(
                    maxLength: 15,
                    decoration: InputDecoration(
                        labelText: "EMAIL",
                        prefixIcon: Icon(Icons.email,)
                    ),
                    onSaved: (usermail) => _useremail = usermail,
                  ),
                ],
              ),
              data: Theme.of(context)
                  .copyWith(primaryColor: Colors.redAccent,),
            ),
...

Вывод:
Оберните все textFormFields виджеты с виджетом Theme и установите поле data в качестве цвета, который вы хотите использовать в качестве маркера.

Answer 2

Приведенный ниже код сгенерирует FocusNodes, необходимое для управления фокусом вашего TextFormFields и выполнения setState, когда фокус меняется с одного поля на другое. Мы просто создаем список узлов фокуса, слушаем изменения на каждом из них и присваиваем их полю:

List<FocusNode> _focusNodes = [
  FocusNode(),
  FocusNode(),
  FocusNode(),
  FocusNode(),
];

@override
void initState() {
  _focusNodes.forEach((node){
    node.addListener(() {
      setState(() {});
    });
  });
  super.initState();
}

@override
Widget build(BuildContext context) {
  return Column(
    children: <Widget>[
      TextFormField(
        focusNode: _focusNodes[0],
        decoration: InputDecoration(
          prefixIcon: Icon(Icons.email,
            color: _focusNodes[0].hasFocus ? Theme.of(context).accentColor : Colors.grey,
          ),
        ),
      ),
      TextFormField(
        focusNode: _focusNodes[1],
        decoration: InputDecoration(
          prefixIcon: Icon(Icons.email,
            color: _focusNodes[1].hasFocus ? Theme.of(context).accentColor : Colors.grey,
          ),
        ),
      ),
      TextFormField(
        focusNode: _focusNodes[2],
        decoration: InputDecoration(
          prefixIcon: Icon(Icons.email,
            color: _focusNodes[2].hasFocus ? Theme.of(context).accentColor : Colors.grey,
          ),
        ),
      ),
    ],
  );
}