验证错误时Flutter重新调整DecoratedBox的大小

Question

我正在使用DecoratedBox向我的TextFormField添加背景。 但是，在将validator用于错误情况之后，DecoratedBox会扩展以容纳错误消息，该错误消息将背景色推到TextFormField的边界之外。有没有办法防止它发生。

final lastNameBox =  DecoratedBox(
  decoration: const BoxDecoration(color: Color(0x2B8E8E93),
      borderRadius:BorderRadius.only(
          topLeft: const Radius.circular(24.0),
          topRight: const Radius.circular(24.0),
          bottomLeft: const Radius.circular(24.0),
          bottomRight: const Radius.circular(24.0))),
  child: firstName,

);


    final firstName = TextFormField(
      controller: _firstNameController,
      keyboardType: TextInputType.emailAddress,
     validator: Validator.validateFirstName,
      autofocus: false,
      decoration: InputDecoration(
        hintText: 'First Name',
        contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
        border: OutlineInputBorder(borderRadius: BorderRadius.circular(32.0)),
      ),
    );

我想要实现的是，在所有情况下，背景颜色始终包裹着TextFormField。 理想情况下，我想让红色错误出现在TextFormField下面，而文本没有任何background颜色。

Answer 1

删除DecoratedBox小部件并修改firstName小部件，例如：

final firstName = TextFormField(
      controller: _firstNameController,
      keyboardType: TextInputType.emailAddress,
     validator: Validator.validateFirstName,
      autofocus: false,
      decoration: InputDecoration(
        hintText: 'First Name',
        filled: true,
        fillColor: Color(0x2B8E8E93),
        contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
        border: OutlineInputBorder(borderRadius: BorderRadius.circular(32.0)),
      ),
    );