Expected design: Image
This is how the current InputDecoration looks like. I want to give a dashed stroke circular border with adjustable gap values.
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)),
),)
I've figured there's no dashed InputBorder
feature as of now for TextFormField
. However, I have found a solution for that using this package dotted_border .
Solution:
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)),
),
),
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.