简体   繁体   English

Flutter - 如何在 TextFormField 中获得虚线 InputDecoration 边框?

[英]Flutter - How to get dashed InputDecoration border in TextFormField?

Expected design: Image预期设计:图片

This is how the current InputDecoration looks like.这就是当前 InputDecoration 的样子。 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 .我认为到目前为止TextFormField没有虚线InputBorder功能。 However, I have found a solution for that using this package dotted_border .但是,我找到了使用此 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)),
                      ),
                    ),

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM