Flutter圆角TextField展示errorText时布局被撑开问题如何解决

问题根因：errorText 是 InputDecoration 的内置属性，属于TextField自身的布局范畴，展示errorText时TextField整体高度会增加，自然会撑开外层包裹的圆角Container。

正常实现效果：

错误状态下的异常效果：

方案1（推荐）：直接使用InputDecoration内置属性实现圆角，无需外层Container #

InputDecoration本身支持背景填充和圆角设置，无需额外套Container，圆角仅作用于输入框区域，errorText会自动展示在圆角区域下方，不会撑开输入框部分：

TextField(
  cursorColor: Colors.black,
  controller: _emailController,
  autocorrect: false,
  textAlignVertical: TextAlignVertical.center,
  decoration: InputDecoration(
    // 开启背景色填充
    filled: true,
    fillColor: AppColors.primary,
    // 配置各状态下的圆角无边框样式
    enabledBorder: OutlineInputBorder(
      borderSide: BorderSide.none,
      borderRadius: BorderRadius.circular(20),
    ),
    focusedBorder: OutlineInputBorder(
      borderSide: BorderSide.none,
      borderRadius: BorderRadius.circular(20),
    ),
    errorBorder: OutlineInputBorder(
      borderSide: BorderSide.none,
      borderRadius: BorderRadius.circular(20),
    ),
    focusedErrorBorder: OutlineInputBorder(
      borderSide: BorderSide.none,
      borderRadius: BorderRadius.circular(20),
    ),
    prefixIcon: Icon(
      Icons.email,
      color: AppColors.primaryPurple,
    ),
    errorText: _emptyEmail ? AppStrings.errorEmail : null,
    hintText: AppStrings.email,
  ),
)

方案2：保留外层Container结构，拆分errorText到外部布局 #

如果需要保留外层自定义Container的结构，可以给Container设置固定高度，同时把errorText从InputDecoration中移除，单独用Text组件放在Container下方：

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  mainAxisSize: MainAxisSize.min,
  children: [
    Container(
      // 固定输入框高度，不会被内部元素撑开
      height: 56,
      decoration: BoxDecoration(
        color: AppColors.primary,
        borderRadius: BorderRadius.circular(20),
      ),
      child: TextField(
        cursorColor: Colors.black,
        controller: _emailController,
        autocorrect: false,
        textAlignVertical: TextAlignVertical.center,
        decoration: InputDecoration(
          prefixIcon: Icon(
            Icons.email,
            color: AppColors.primaryPurple,
          ),
          border: InputBorder.none,
          hintText: AppStrings.email,
        ),
      ),
    ),
    // 独立的错误提示组件
    if (_emptyEmail)
      Padding(
        padding: const EdgeInsets.only(left: 14, top: 4),
        child: Text(
          AppStrings.errorEmail,
          style: TextStyle(color: Theme.of(context).colorScheme.error, fontSize: 12),
        ),
      )
  ],
)

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