带圆角的文本字段：错误文本行为答案

【问题标题】：TextField with rounded corners : error text behaviour带圆角的文本字段：错误文本行为
【发布时间】：2021-12-02 18:58:04
【问题描述】：

我的带有 Flutter 的 Material TextField 看起来像这样：

从此代码（用于电子邮件文本字段）：

Container(
      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,
          errorText: _emptyEmail ? AppStrings.errorEmail : null,
          hintText: AppStrings.email,
        ),
      ),
    ),

问题是当显示错误时，会发生这种行为：

有没有办法解决这个问题（所以错误在 TextField 下面而不是扩展它）？

【问题讨论】：

标签： flutter dart

【解决方案1】：

您正在对容器使用装饰，这就是在框内显示文本错误的原因。您可以将 TextField 装饰为：

TextField(
    decoration: InputDecoration(
     border: OutlineInputBorder(
     borderRadius: BorderRadius.circular(15)
    ),
     filled: true,
     fillColor: Colors.blue.shade100,
     ),
),

去掉容器的颜色，在TextField中使用填充

【讨论】：

【解决方案2】：

父容器必须具有相同的视图背景颜色和文本字段的原色。试试这个：

Container(
      decoration: BoxDecoration(
        color: backgroundColor, // <--- change this
        borderRadius: BorderRadius.circular(20),
      ),
      child: TextField(
        cursorColor: Colors.black,
        controller: _emailController,
        autocorrect: false,
        textAlignVertical: TextAlignVertical.center,
        decoration: InputDecoration(
          filled: true, // <-- add filled
          fillColor: AppColors.primary, // <--- and this
          prefixIcon: Icon(
            Icons.email,
            color: AppColors.primaryPurple,
          ),
          border: InputBorder.none,
          errorText: _emptyEmail ? AppStrings.errorEmail : null,
          hintText: AppStrings.email,
        ),
      ),
    ),

【讨论】：