[英]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.