如何更改焦点上的文本字段背景颜色

Question

当用户点击文本字段时，我需要将文本字段背景颜色从灰色更改为白色。聚焦的文本字段的背景颜色应该从灰色变为白色，其他未聚焦的文本域背景颜色保持灰色。

我试过这个

inputDecorationTheme: InputDecorationTheme(
filled: true,
fillColor: AppColors.textFieldBG,
focusColor: AppColors.white,
hintStyle: const TextStyle(color: AppColors.labelText, fontSize: 16),
contentPadding:
const EdgeInsets.symmetric(horizontal: 10, vertical: 20),
focusedBorder: OutlineInputBorder(
borderSide: const BorderSide(color: Colors.black26),
borderRadius: BorderRadius.circular(10)),
disabledBorder: OutlineInputBorder(
borderSide: const BorderSide(color: Colors.transparent),
borderRadius: BorderRadius.circular(10)),
enabledBorder: UnderlineInputBorder(
borderSide: const BorderSide(color: Colors.transparent),
borderRadius: BorderRadius.circular(10),
),  

这是文本文件代码：

TextField(
focusNode: focusNode,
onChanged: onChanged,
controller: controller,
maxLines: maxLines,
onTap: onTap,
enabled: isEnable,
decoration: InputDecoration(
filled: true,
fillColor: AppColors.textFieldBG,
focusColor: AppColors.white,
hintText: hintText,
suffixIcon: isShowSuffixIcon
? InkWell(
onTap: onTapIcon,
child: const Icon(
Icons.date_range_outlined,
color: AppColors.labelText,
),
)
: null),
),

Answer 1

您可以这样做：

FocusNode _focusNode = FocusNode();
Color _color = Colors.grey;

@override
void initState() {
_focusNode.addListener(() {
if(_focusNode.hasFocus){
setState(() {
_color = Colors.white;
});
}
else{
setState(() {
_color = Colors.grey;
});
}
});
}

TextField(
decoration: InputDecoration(
fillColor: _color,
filled: true
),
focusNode: _focusNode,
),

Answer 2

您只需要为TextField 使用一个Focus节点

只需遵循本文档，您将了解更多关于使用textFormField或textField的Focus Node的可能性。