扑。是否可以更改textformfield errortext填充？

Question

我将 TextFormField 与 OutlineInputBorder 一起使用。我需要里面的文本在右侧和左侧有填充。为此，我正在使用：

 contentPadding: const EdgeInsets.symmetric(vertical: 4, horizontal: 8),

一切正常。不过，我也使用验证器。如果在字段中输入了错误的值，则会显示错误。

但我需要填充不适用于错误。你能告诉我这是否可以实现吗？例如，看图片：

是否可以仅更改我的错误文本的填充？

请帮我。

Answer 1

目前没有可能的解决方案。如果我们检查 TextFormField ，
contentPadding 还控制错误文本，

但我们可以实现

这是我的代码

  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
  bool onError = false;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: SingleChildScrollView(
        padding: EdgeInsets.all(10),
        child: Column(
          children: [
            Form(
                key: _formKey,
                child: Container(
                    padding: EdgeInsets.only(
                        left: 20, right: 20, top: 20, bottom: 20),
                    child: Stack(children: [
                      Container(
                          padding: EdgeInsets.only(bottom: 20),
                          child: TextFormField(
                            style: TextStyle(color: Colors.amber, fontSize: 14),
                            controller: emailEditingController,
                            decoration: InputDecoration(
                              alignLabelWithHint: true,
                              floatingLabelBehavior:
                                  FloatingLabelBehavior.never,
                              contentPadding: EdgeInsets.fromLTRB(30, 5, 10, 5),
                              labelText: "Enter Email",
                              border: OutlineInputBorder(
                                borderRadius: BorderRadius.circular(30.0),
                              ),
                              labelStyle: TextStyle(
                                  color: Colors.grey.shade400, fontSize: 14),
                            ),
                            validator: (String? value) {
                              setState(() {
                                onError = false;
                              });
                              if (value!.isEmpty) {
                                setState(() {
                                  onError = true;
                                });
                                return null;
                              }
                              return null;
                            },
                          )),
                      onError
                          ? Positioned(
                              bottom: 0,
                              child: Text('this is an error msg',
                                  style: TextStyle(color: Colors.red)))
                          : Container()
                    ]))),
            MaterialButton(
                key: Key('login'),
                minWidth: 150,
                height: 50,
                color: Colors.amber,
                child: Text('login'),
                onPressed: () {
                  FocusScope.of(context).requestFocus(FocusNode());
                  if (_formKey.currentState!.validate()) {}
                }),
          ],
        ),
      ),
     );
   }
}

注意

请不要添加错误消息文本、错误消息样式等。因为它会创造一个空间

输出将为

Answer 2

        TextFormField(
          style: const TextStyle(color: Colors.green, fontSize: 14),
          controller: controller,
          decoration: InputDecoration(
            prefixIcon:
                Container(width: 10), // Give container some width.
            contentPadding: EdgeInsets
                .zero, // Set this to zero since no padding is needed.
            labelText: "Enter Email",
            border: OutlineInputBorder(
              borderRadius: BorderRadius.circular(8.0),
            ),

            labelStyle:
                TextStyle(color: Colors.grey.shade400, fontSize: 14),
          ),
          autovalidateMode: AutovalidateMode.onUserInteraction,
          textInputAction: TextInputAction.done,
          validator: (String? value) {
            if (value == null || value.isEmpty) {
              return "Please enter some text";
            }
            return null;
          },
        ),

如此简单！

Answer 3

这就是我实现它的方法！

decoration: InputDecoration(
                                    prefixIconConstraints:
                                        BoxConstraints.tight(
                                            const Size(10, 60)),
                                    prefixIcon: Container(
                                      width: 0,
                                    ),
                                    contentPadding: EdgeInsets.zero,
                                    hintText: "Customer Name",
                                  ),

Answer 4

在前缀字段上尝试填充

decoration: InputDecoration(
...
   contentPadding: const EdgeInsets.only(bottom: 0.0, top: 15.0),
   prefix: const Padding(
     padding: EdgeInsets.only(left: 20.0)),
     ),
...
),

以获取更多检查详细信息，请检查此链接