[英]Flutter: Change Icon background color in text form field
I have this TextFormField wrapped in container for shadow effect.我将这个 TextFormField 包裹在容器中以获得阴影效果。 And input decoration for field styling.
并为字段样式输入装饰。 The icon background color and field background color are different.
图标背景颜色和字段背景颜色不同。
I am not able to change the icon background color of the field.我无法更改该字段的图标背景颜色。
I am trying to achieve我正在努力实现
Please suggest a way to change the icon background color.请提出一种更改图标背景颜色的方法。
Here is the code这是代码
Container(
margin: const EdgeInsets.all(24.0),
decoration: const BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(10.0),
),
boxShadow: [
BoxShadow(
spreadRadius: 10.0,
blurStyle: BlurStyle.outer,
blurRadius: 4.0,
color: Colors.black26,
),
],
),
child: Material(
child: TextFormField(
maxLines: 1,
decoration: InputDecoration(
icon: Icon(
Icons.search,
size: 24.0,
color: Theme.of(context).primaryColor,
),
isDense: true,
hintText: 'Search',
contentPadding: const EdgeInsets.symmetric(vertical: 8.0),
fillColor: Theme.of(context).scaffoldBackgroundColor,
filled: true,
floatingLabelBehavior: FloatingLabelBehavior.never,
focusedBorder: InputBorder.none,
border: InputBorder.none,
),
onFieldSubmitted: (text) {
// Perform search
},
),
),
)
Wrap the Icon
with a Container
and give it a color.用一个
Container
包裹Icon
并给它一个颜色。
Container(
color: Colors.red,
child: Icon(
Icons.search,
size: 24.0,
color: Theme.of(context).primaryColor,
),
)
Add color attribute to Material widget to change icon background color.将颜色属性添加到 Material 小部件以更改图标背景颜色。
Container(
margin: const EdgeInsets.all(24.0),
decoration: const BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(10.0),
),
boxShadow: [
BoxShadow(
spreadRadius: 10.0,
blurStyle: BlurStyle.outer,
blurRadius: 4.0,
color: Colors.black26,
),
],
),
child: Material(
color: Colors.transparent //Changed here
child: TextFormField(
maxLines: 1,
decoration: InputDecoration(
icon: Icon(
Icons.search,
size: 24.0,
color: Colors.black,
),
isDense: true,
hintText: 'Search',
contentPadding: const EdgeInsets.symmetric(vertical: 8.0),
fillColor: Theme.of(context).scaffoldBackgroundColor,
filled: true,
floatingLabelBehavior: FloatingLabelBehavior.never,
focusedBorder: InputBorder.none,
border: InputBorder.none,
),
onFieldSubmitted: (text) {
// Perform search
},
),
),
),
I add comments in the code to report where i changed.我在代码中添加注释以报告我更改的位置。
This is the result:这是结果:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.