[英]How can i add a divider between icon and text in TextFormField in flutter
I am using a TextFormField in flutter.我在 flutter 中使用 TextFormField。 Can i put a divider between prefixIcon and text in it?
我可以在 prefixIcon 和 text 之间放置一个分隔符吗? Is there an icon which looks like a divider (in any package)??.
是否有一个看起来像分隔线的图标(在任何包中)?? Here is my code -
这是我的代码 -
Container(
color: Colors.black45,
width: MediaQuery.of(context).size.width,
padding: EdgeInsets.only(left: 5.0, right: 50.0, bottom: 5.0),
child: TextFormField(
textAlignVertical: TextAlignVertical.bottom,
style: TextStyle(
color: Colors.white
),
cursorColor: Color(0xFF075E54),
decoration: InputDecoration(
contentPadding: EdgeInsets.only(bottom: 13.0),
prefixIcon: Icon(
Icons.add_photo_alternate,
color: Colors.white,
size: MediaQuery.of(context).size.width*0.07,
),
border: InputBorder.none,
hintText: 'Add a caption...',
hintStyle: TextStyle(
color: Colors.grey[400],
fontSize: MediaQuery.of(context).size.width*0.042,
)
),
),
),
Pass desirable divider widget to prefix
option of input decoration, or i believe you can wrap prefixIcon
with Container
with boxdecoration and one right border as divider将所需的分隔器小部件传递给输入装饰的
prefix
选项,或者我相信您可以将prefixIcon
与带有 boxdecoration 的Container
和一个右边框作为分隔器包装
You wan wrap your Icon inside a Container
and applying a border to it, here is a sample code:你想把你的 Icon 包装在一个
Container
里面,并给它应用一个边框,这里是一个示例代码:
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
color: Colors.black45,
width: MediaQuery.of(context).size.width,
padding: EdgeInsets.only(left: 5.0, right: 50.0),
child: TextFormField(
textAlignVertical: TextAlignVertical.bottom,
style: TextStyle(color: Colors.white),
cursorColor: Color(0xFF075E54),
decoration: InputDecoration(
contentPadding: EdgeInsets.only(bottom: 13.0),
prefixIcon: Container(
margin: EdgeInsets.only(right: 8),
decoration: BoxDecoration(
border: Border(right: BorderSide(color: Colors.white)),
),
child: Icon(
Icons.add_photo_alternate,
color: Colors.white,
size: MediaQuery.of(context).size.width * 0.07,
),
),
border: InputBorder.none,
hintText: 'Add a caption...',
hintStyle: TextStyle(
color: Colors.grey[400],
fontSize: MediaQuery.of(context).size.width * 0.042,
),
),
),
);
}
}
Try the full code on DartPad 在 DartPad 上试用完整代码
Screenshot截屏
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.