我想更改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。保留默认值
未选择字段时将显示灰色,而当选择字段时将显示原色。下面是相同的屏幕截图。在这里,我想将图标的颜色从灰色更改为红色,并希望在选择时显示原色。
下面的代码将生成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,
),
),
),
],
);
}
[如果要在选择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,),
),
...