出现errorText时如何使Textformfield样式保持不变

Question

我正在设计一个电话号码输入框。默认样式会像第一张图片，但是当出现textError时，样式会像第二张图片一样中断。有没有办法让 用户文本输入 到 底线 的 spacing 像 error 时的默认样式一样不显示？

第一张图片

第二张图片

NumberTextField小部件，如图所示大小的小部件，包括标志和TextFieldWidget。小部件

小部件：

import 'package:flutter/material.dart';
import 'package:online_croceries/widgets/textfield_widget.dart';


class NumberTextField extends StatelessWidget {
  String? urlImageFlag;
  int? code;
  final TextEditingController? textEditingController;
  ValueChanged? onChanged;
  final String? error_text;

  NumberTextField({Key? key, urlImage, code, required this.textEditingController,this.onChanged, required this.error_text})
      : super(key: key);
  @override
  Widget build(BuildContext context) {
    final height = MediaQuery.of(context).size.height;
    final width = MediaQuery.of(context).size.width;

    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
           ClipRRect(
             clipBehavior: Clip.antiAlias,
             borderRadius: BorderRadius.circular(5.0),
             child: Image.asset(
               urlImageFlag ?? 'assets/images/flag_country.png',
               height: (height / 100) * 3,
               width: (width / 100) * 9,
               fit: BoxFit.fill,
             ),
           ),
           Padding(
             padding: const EdgeInsets.only(left: 10.0,right:10),
             child: Text(
               '+${code ?? 880}',
               style: const TextStyle(
                   fontWeight: FontWeight.w600, fontSize: 16.0),
             ),
           ),
            Expanded(
              child:
              TextFieldWidget(
                inputType: TextInputType.phone,
                textController: textEditingController!,
                inputAction: TextInputAction.next,
                autoFocus: false,
                onChanged: onChanged,
                errorText: error_text,
              ),

            ),
          ],
        ),
        // const Divider(thickness: 1.5, height: 0.3, color: Colors.grey),
      ],
    );
  }
}

TextFieldWidget

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: padding,
      child: TextFormField(
        controller: textController,
        focusNode: focusNode,
        onFieldSubmitted: onFieldSubmitted,
        onChanged: onChanged,
        autofocus: autoFocus,
        textInputAction: inputAction,
        obscureText: this.isObscure,
        maxLength: 25,
        keyboardType: this.inputType,
        decoration: InputDecoration(
            hintText: this.hint,
            errorText: errorText,
            counterText: '',
            // icon: this.isIcon ? Icon(this.icon, color: iconColor) : null
        ),
      ),
    );
  }

Answer 1

只需在装饰中添加一个errorBorder，显示错误时的样子：

decoration: InputDecoration(
   hintText: this.hint,
   errorText: errorText,
   counterText: '',
   // icon: this.isIcon ? Icon(this.icon, color: iconColor) : null
   errorBorder: //code how you want..
),