Flutter TextFormField 为错误文本添加填充

Question

我有一个这样的表单元素

错误消息像这样堆积起来

有没有办法在错误文本周围添加小填充？

这是小部件

 Card(
                              color: Colors.white.withOpacity(0.9),
                              shadowColor: Colors.grey.withOpacity(0.2),
                              elevation: 15,
                              child: TextFormField(
                                style: TextStyle(
                                  fontSize: _screenFontSize,
                                ),
                                decoration: InputDecoration(
                                    border: InputBorder.none,
                                    prefixIcon: Icon(
                                      Icons.email_outlined,
                                      color: Colors.grey,
                                    ),
                                    hintText: "example@website.com",
                                    labelText: "EMAIL",
                                    labelStyle: TextStyle(color: Colors.grey)),
                                keyboardType: TextInputType.emailAddress,
                                // The validator receives the text that the user has entered.
                                validator: (value) {
                                  if (value == null ||
                                      value.isEmpty ||
                                      !value.contains('@') ||
                                      !value.contains('.')) {
                                    return 'Please enter a valid Email';
                                  }
                                  return null;
                                },
                              ),
                            ),

Answer 1

更新：

如果您对 hacky 方法感到满意，请使用这样的错误字符串，

return '    Please enter a valid Email\n';

实际解释：

根据当前的实现，这在Flutter中是不可能的。

解释：

如果你查看TextFormField的源代码并找出负责渲染错误字符串的Widget ，你会来到以下文件。

flutter/lib/src/material/input_decorator.dart

现在，如果您检查它如何呈现错误消息，

if (widget.errorText != null) {
  return Stack(
    children: <Widget>[
      Opacity(
        opacity: 1.0 - _controller.value,
        child: _helper,
      ),
      _buildError(),
    ],
  );
}

在这里， _buildError就是这样，

Widget _buildError() {
  assert(widget.errorText != null);
  return Semantics(
    container: true,
    liveRegion: true,
    child: Opacity(
      opacity: _controller.value,
      child: FractionalTranslation(
        translation: Tween<Offset>(
          begin: const Offset(0.0, -0.25),
          end: Offset.zero,
        ).evaluate(_controller.view),
        child: Text(
          widget.errorText!,
          style: widget.errorStyle,
          textAlign: widget.textAlign,
          overflow: TextOverflow.ellipsis,
          maxLines: widget.errorMaxLines,
        ),
      ),
    ),
  );
}

现在您注意到正在构建的实际Text小部件，您会发现它只是包装在Opacity和FractionalTranslation中。

现在， FractionalTranslation可能允许我们稍微更改Text小部件的 position，但如果您注意到， translation是硬编码的，可以在Tween之间进行动画处理，因此不会通过任何属性进行更改。

所以，不幸的是，不可能。