Flutter - 如何在TextFormField中获得虚线输入装饰边框?

问题描述 投票:0回答:1

预期的设计。图片

这是当前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)),
            ),)
android flutter dart flutter-layout
1个回答
0
投票

我已经想好了,没有虚线。InputBorder 功能,截至目前为 TextFormField. 然而,我已经找到了一个解决方案,使用这个软件包 虚线.

解决办法。

                  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)),
                      ),
                    ),
© www.soinside.com 2019 - 2024. All rights reserved.