[英]Flutter TextField add box shadow
I tried create TextField
with shadow effect using Container
like this:我尝试使用这样的Container
创建具有阴影效果的TextField
:
Code:代码:
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: new BorderRadius.circular(5.0),
boxShadow: [
BoxShadow(
color: Colors.black12,
spreadRadius: 1,
blurRadius: 3,
),
],
),
child: TextFormField(
validator: (value) {
if (value.isEmpty) {
return 'Product title required';
}
return null;
},
decoration: InputDecoration(
isDense: true,
hintText: 'Product title',
contentPadding: EdgeInsets.all(18.0),
filled: true,
fillColor: Colors.white,
border: OutlineInputBorder(
borderRadius: new BorderRadius.circular(10.0),
borderSide: BorderSide.none,
),
),
textAlign: TextAlign.start,
maxLines: 1,
),
)
But when validation has error then error message shows inside Container
which is incorrect in my case:但是,当验证出现错误时, Container
内会显示错误消息,这在我的情况下是不正确的:
How I can create TextField
like this shadow with correctly displaying error message and error border colors like this but with shadow:如何创建像这样的阴影的TextField
并正确显示错误消息和错误边框 colors 像这样但带有阴影:
Try to wrap it with "Material" widget尝试用“材料”小部件包装它
Material(
elevation: 5,
child: TextFormField(
validator: (value) {
if (value.isEmpty) {
return 'Product title required';
}
return null;
},
decoration: InputDecoration(
isDense: true,
hintText: 'Product title',
contentPadding: EdgeInsets.all(18.0),
filled: true,
fillColor: Colors.white,
border: OutlineInputBorder(
borderRadius: new BorderRadius.circular(10.0),
borderSide: BorderSide.none,
),
),
textAlign: TextAlign.start,
maxLines: 1,
),
),
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.