Flutter 防止TextFiled Form表单validator时红字出来时会撑一下布局

当输入内容报错后 TextFiled会自动展示红字报错,但是红字出来时会撑一下布局,官方其实默认是这样的,符合设计规范,但是不想这样的话,修改方法TextFiled增加 errorText: “”,这里的意思是errorText提前占位,只不过内容是空字符,但是写上errorText时会发现红字时底线也变红,不想边线变红可以如下修改方法

       focusedErrorBorder: UnderlineInputBorder(
                  borderSide: BorderSide(
                    color: primaryColor,
                    width: 2,
                  ),
                  borderRadius: BorderRadius.circular(2)),
              errorBorder: UnderlineInputBorder(
                  borderSide: BorderSide(
                    color: lineColor,
                    width: 2,
                  ),
                  borderRadius: BorderRadius.circular(2)),

完整代码



typedef void OnValueChanged(String value);
typedef void VisibleClick();

class LoginTextFiled extends StatelessWidget {
  final bool pswVisible;
  final VisibleClick visibleClick;
  final String hintText;

  final TextEditingController controller;
  final OnValueChanged onValueChanged;
  final FocusNode focusNode;
  final ShakeAnimationController animationController;
  final Function onClear;
  final TextInputAction textInputAction;
  final TextInputType textInputType;
  final bool isVisibleSuffixText;
  final String leftText;
  final bool isPhoneNumber;
  final FormFieldValidator<String> validator;

  final ValueChanged<String> onFieldSubmitted;

  const LoginTextFiled(
      {Key key,
      this.controller,
      this.onValueChanged,
      this.pswVisible = true,
      this.visibleClick,
      this.hintText,
      this.animationController,
      this.focusNode,
      this.onClear,
      this.textInputAction,
      this.textInputType,
      this.isVisibleSuffixText = false,
      this.leftText,
      this.isPhoneNumber = false,
      this.validator,
      this.onFieldSubmitted})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
        child: ShakeAnimation(
      TextFormField(
          onFieldSubmitted: onFieldSubmitted,
          validator: validator,
          autovalidateMode: AutovalidateMode.onUserInteraction,
          style: t14blackblod,
          textInputAction: textInputAction,
          keyboardType: isPhoneNumber
              ? TextInputType.number
              : TextInputType.visiblePassword,
          obscureText: pswVisible,
          inputFormatters: isPhoneNumber
              ? [
                  LengthLimitingTextInputFormatter(11),
                  FilteringTextInputFormatter.allow(RegExp('[0-9]'))
                ]
              : [
                  LengthLimitingTextInputFormatter(20),
                ],
          controller: controller,
          focusNode: focusNode ?? FocusNode(),
          onChanged: (text) {
            if (onValueChanged != null) {
              onValueChanged(text);
            }
          },
          decoration: InputDecoration(
              prefixIcon: Visibility(
                  visible: isVisibleSuffixText,
                  child: Padding(
                      padding: EdgeInsets.only(right: 10, bottom: 3),
                      child: Text(
                        leftText ?? "",
                        style: t14blackSemiblod,
                      ))),
              prefixIconConstraints: BoxConstraints(),
              suffixIcon: Row(
                mainAxisSize: MainAxisSize.min,
                mainAxisAlignment: MainAxisAlignment.end,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  controller.text == null || controller.text == ''
                      ? Container()
                      : GestureDetector(
                          child: Container(
                            child: Image.asset(
                              'assets/images/clear_icon.png',
                              width: 14,
                              height: 14,
                            ),
                          ),
                          onTap: () {
                            controller.text = '';
                            onClear();
                          },
                        ),
                  Visibility(
                      visible: !isPhoneNumber,
                      child: SizedBox(
                        width: 10,
                      )),
                  Visibility(
                      visible: !isPhoneNumber,
                      child: GestureDetector(
                        child: Container(
                          width: 15,
                          height: 15,
                          child: Image.asset(pswVisible
                              ? 'assets/images/close_eye.png'
                              : 'assets/images/open_eye.png'),
                        ),
                        onTap: () {
                          if (visibleClick != null) {
                            visibleClick();
                          }
                        },
                      )),
                ],
              ),
              fillColor: Colors.white,
              hintStyle: t14hintText,
              enabledBorder: UnderlineInputBorder(
                  borderSide: BorderSide(
                    color: lineColor,
                    width: 2,
                  ),
                  borderRadius: BorderRadius.circular(2)),
              focusedBorder: UnderlineInputBorder(
                  borderSide: BorderSide(
                    color: primaryColor,
                    width: 2,
                  ),
                  borderRadius: BorderRadius.circular(2)),
              hintText: '${hintText ?? '${S.of(context).input_psw_tips}'}',
              focusedErrorBorder: UnderlineInputBorder(
                  borderSide: BorderSide(
                    color: primaryColor,
                    width: 2,
                  ),
                  borderRadius: BorderRadius.circular(2)),
              errorBorder: UnderlineInputBorder(
                  borderSide: BorderSide(
                    color: lineColor,
                    width: 2,
                  ),
                  borderRadius: BorderRadius.circular(2)),
              errorText: "",
              errorStyle: t12ErrorRed,
              filled: false,
              counterText: '')),
      animationController,
    ));
  }
}

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值