[英]Flutter - How to get dashed InputDecoration border in TextFormField?
预期设计:图片
这就是当前 InputDecoration 的样子。 我想给出一个带有可调节间隙值的虚线圆形边框。
InputDecoration(
contentPadding: EdgeInsets.symmetric(vertical: 0, horizontal: 15.0),
filled: true,
fillColor: Colors.white,
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Kolors.accent, width: 5.0,),
borderRadius: BorderRadius.all(Radius.circular(40)),
),)
我认为到目前为止TextFormField
没有虚线InputBorder
功能。 但是,我找到了使用此 package dotted_border的解决方案。
解决方案:
DottedBorder(
color: _isFocused ? Kolors.accent : Kolors.stroke,
strokeWidth: 1.5,
dashPattern: [7, 4],
borderType: BorderType.RRect,
radius: Radius.circular(40),
child: TextFormField(
controller: _promoController,
cursorColor: Kolors.textGrey,
style: TextStyle(
color: Kolors.textBlack,
fontSize: 14,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal),
decoration: InputDecoration(
contentPadding:
EdgeInsets.symmetric(horizontal: 15),
border: OutlineInputBorder(
borderSide: BorderSide.none,
borderRadius: BorderRadius.circular(0),
),
hintText: "Type your promocode",
hintStyle: TextStyle(
color: Kolors.textHint,
fontSize: 14)),
),
),
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.