Flutter :TextFormField验证错误消息文本填充

ppcbkaq5  于 2023-02-13  发布在  Flutter
关注(0)|答案(2)|浏览(261)

我在flutter应用程序中为文本字段使用了TextFormFied。我只想删除flutter验证器错误消息中的左填充。我尝试了contentPadding,但它也删除了输入文本填充。但我只想删 debugging 误消息填充。

我怎样才能只去掉这个填充物?有人能帮我吗?

umuewwlo

umuewwlo1#

下面的代码将创建一个TextFormField
如你所见,contentPadding负责labelTexterrorText的填充,如果你将contentPadding修改为EdgeInsets.symmetric(horizontal: 0.0, vertical: 16.0,),那么errorText就会出现在你想要的位置。

Padding(
  padding: const EdgeInsets.all(16.0),
  child: TextFormField(
    controller: TextInputController(),
    decoration:  InputDecoration(
      labelText: 'Input anything',
      errorText: 'hey there its an error',
      contentPadding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 16.0,),
      enabledBorder:  OutlineInputBorder(
        borderRadius: BorderRadius.circular(8.0),
        borderSide: const BorderSide(color: Colors.indigo, width: 1.2),
      ),
      focusedBorder: OutlineInputBorder(
        borderRadius: BorderRadius.circular(8.0),
        borderSide: const BorderSide(color: Colors.indigo, width: 1.2),
      ),
      errorBorder: OutlineInputBorder(
        borderRadius: BorderRadius.circular(8.0),
        borderSide: const BorderSide(color: Colors.red, width: 1.2),
      ),
      border: OutlineInputBorder(
        borderRadius: BorderRadius.circular(8.0),
        borderSide: const BorderSide(color: Colors.red, width: 1.2),
      ),
    ),
    validator: (value) {
      return "";
    },
  ),
),

另一种方法是将TextFormFields Package 到Column中,并在底部添加Text Widget。
InputDecoration上卸下errorText
这里您需要通过自己的逻辑来管理Text的显示和隐藏操作。

Padding(
  padding: const EdgeInsets.all(16.0),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      TextFormField(
        controller: inputController,
        decoration:  InputDecoration(
          labelText: 'Input anything',
          contentPadding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 16.0,),
          enabledBorder:  OutlineInputBorder(
            borderRadius: BorderRadius.circular(8.0),
            borderSide: const BorderSide(color: Colors.indigo, width: 1.2),
          ),
          focusedBorder: OutlineInputBorder(
            borderRadius: BorderRadius.circular(8.0),
            borderSide: const BorderSide(color: Colors.indigo, width: 1.2),
          ),
          errorBorder: OutlineInputBorder(
            borderRadius: BorderRadius.circular(8.0),
            borderSide: const BorderSide(color: Colors.red, width: 1.2),
          ),
          border: OutlineInputBorder(
            borderRadius: BorderRadius.circular(8.0),
            borderSide: const BorderSide(color: Colors.red, width: 1.2),
          ),
        ),
        validator: (value) {
          return "";
        },
      ),
      const SizedBox(
        height: 8,
      ),
      Text('hey there its an error',style: Get.textTheme.headline6?.copyWith(color: Colors.red,),),
    ],
  ),

tyky79it

tyky79it2#

还有另一种方法来实现这个UI -你必须使用一个Text小部件来表示你的错误消息。并且你必须为TextFormField验证传递null。请检查下面的代码。

//Variable declaration
 TextEditingController emailController = TextEditingController();
 final GlobalKey<FormState> formKey = GlobalKey<FormState>();
 String errorString = "";

//Widget
Column(
    children: [
       Form(
           key: formKey,
           child: TextFormField(
               controller: emailController,
                ... ... ...    
                    validator: (value) {
                      if (value!.isEmpty) {
                        errorString = "This field is required";
                      } else {
                        errorString = "";
                      }
                      return null;
                    },
                  ),
                ),
             Align(alignment: Alignment.centerLeft, child: Text(errorString))
              ],
            ),

然后,您必须根据需要添加填充和空格小部件。
结果:x1c 0d1x

相关问题