Flutter TextFormField无值时形状变化问题求解决方案

我的TextFormField在未填写内容时，提交表单后形状会发生变化（对应两张对比图），我希望该TextFormField的形状保持不变，请问有什么解决方案？

实现代码 #

Container(
  height: Sizes.screenHeight(context) * 0.13,
  width: Sizes.screenWidth(context) * 0.01,
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceAround,
    children: [
      Container(
        height: Sizes.screenHeight(context) * 0.06,
        width: Sizes.screenWidth(context) * 0.4,
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(10),
            border: Border.all(color: SporteevColors.black)),
        child: Container(
          margin: const EdgeInsets.only(left: 8, right: 8),
          child: DropdownButtonFormField<String?>(
            hint: const Text("Media Social"),
            decoration: const InputDecoration(
                enabledBorder: InputBorder.none,
                focusedBorder: InputBorder.none),
            borderRadius: BorderRadius.circular(10),
            value: mediaSocial,
            items: listMediaSocial,
            isExpanded: true,
            onChanged: (value) {
              setState(() {
                mediaSocial = value;
              });
            },
          ),
        ),
      ),
      SizedBox(
        height: Sizes.screenHeight(context) * 0.062,
        width: Sizes.screenWidth(context) * 0.4,
        child: TextFormField(
          keyboardType: mediaSocial == "WhatsApp"
              ? TextInputType.number
              : TextInputType.text,
          validator: (value) {
            if (value == null || value.isEmpty) {
              return 'Please enter id';
            }
            return null;
          },
          onSaved: (value) => _data['contact'] = value,
          controller: _idSocialMedia,
          decoration: InputDecoration(
            hintText: 'ID/username/No',
            hintStyle:
                const TextStyle(color: SporteevColors.grey),
            contentPadding: const EdgeInsets.symmetric(
                vertical: 20, horizontal: 20),
            fillColor: Colors.white.withOpacity(0.9),
            filled: true,
            border: OutlineInputBorder(
              borderRadius: BorderRadius.circular(10),
            ),
          ),
        ),
      ),
    ],
  ),
),

问题根源是表单验证失败时，TextFormField会自动使用默认的错误状态边框样式，该样式的圆角和你自定义的正常边框不一致，导致形状改变。只需在InputDecoration中显式设置errorBorder和focusedErrorBorder，让它们与border保持相同的圆角（及边框样式）即可。

修改后的TextFormField装饰部分代码如下：

decoration: InputDecoration(
  hintText: 'ID/username/No',
  hintStyle: const TextStyle(color: SporteevColors.grey),
  contentPadding: const EdgeInsets.symmetric(vertical: 20, horizontal: 20),
  fillColor: Colors.white.withOpacity(0.9),
  filled: true,
  border: OutlineInputBorder(
    borderRadius: BorderRadius.circular(10),
  ),
  // 错误状态下的边框，保持圆角一致
  errorBorder: OutlineInputBorder(
    borderRadius: BorderRadius.circular(10),
    borderSide: const BorderSide(color: Colors.red), // 可自定义错误边框颜色，也可设为和正常边框一致的SporteevColors.black
  ),
  // 聚焦时错误状态的边框，同样保持圆角一致
  focusedErrorBorder: OutlineInputBorder(
    borderRadius: BorderRadius.circular(10),
    borderSide: const BorderSide(color: Colors.red),
  ),
),

这样无论表单验证是否失败，TextFormField的圆角都会固定为10，形状不会发生变化。

内容的提问来源于stack exchange，提问作者Bimabara