颤振 - 如何在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功能。但是,我已经找到了使用此软件包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)),
),
),

最新更新