将默认TextFormField的图标颜色从灰色更改为任何颜色,但在选择时显示原色

问题描述 投票:1回答:2

我想更改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,
      ),

enter image description here

2。保留默认值

未选择字段时将显示灰色,而当选择字段时将显示原色。下面是相同的屏幕截图。在这里,我想将图标的颜色从灰色更改为红色,并希望在选择时显示原色。

enter image description here

flutter dart flutter-layout
2个回答
0
投票

下面的代码将生成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,
          ),
        ),
      ),
    ],
  );
}

0
投票

[如果要在选择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,),
            ),
...
© www.soinside.com 2019 - 2024. All rights reserved.