How to edit spacing between Flutter's TextFormField input and errorText

user_6732069 0
Viewed 12230

Is there a way to decrease the spacing between the actual input and the error text in a TextFormField widget? As it stands right now having error texts displayed on the form almost doubles the size of the form and I would like to keep the form area the same size with or without error text. From the pictures below you can see how much change it makes and that there is quite a lot of space between the input and the error message that could use reducing.

Form before errors Form after errors

Here is an example of one of the formfields

Padding(
                padding: EdgeInsets.only(
                    top: 5.0, bottom: 5.0, left: 25.0, right: 25.0),
                child: TextFormField(
                  focusNode: myFocusNodeName,
                  controller: signupNameController,
                  keyboardType: TextInputType.text,
                  textCapitalization: TextCapitalization.words,
                  style: TextStyle(
                      fontFamily: "WorkSansSemiBold",
                      fontSize: 16.0,
                      color: Colors.black),
                  decoration: InputDecoration(
                    border: InputBorder.none,
                    icon: Icon(
                      FontAwesomeIcons.user,
                      color: Colors.black,
                    ),
                    errorText: signupLastNameErrorText,
                    hintText: "Last Name",
                    hintStyle: TextStyle(
                        fontFamily: "WorkSansSemiBold", fontSize: 16.0),
                  ),
                  validator: (value) =>
                      value.isEmpty ? 'Last Name can\'t be empty' : null,
                  onSaved: (value) => _lastname = value,
                ),
              ),
dart flutter
5 Answers

Add decoration in TextFormField Widget.

InputDecoration(
      contentPadding: EdgeInsets.only(left: 11, right: 3, top: 14, bottom: 14),
      errorStyle: TextStyle(fontSize: 9, height: 0.3),
)
user_137616420

There seems to be no way to do it unless you open the source code of InputDecoration (on your sdk folder flutter/packages/flutter/lib/src/material/input_decorator.dart)

look for _buildError
wrap the Text with Container like

Container(
    padding: EdgeInsets.only(bottom: 4),
    child: Text(
        widget.errorText,
        style: widget.errorStyle,
        textAlign: widget.textAlign,
        overflow: TextOverflow.ellipsis,
        maxLines: widget.errorMaxLines,
    )
)
user_2586480

My solutions, You can using:

maxLength For each TextFeild, => You will have space you want when show error, Affter that you can transparent color counter, It Worked,

user_115491130

The vertical padding of errorText is set in input_decorator.dart:

final double helperErrorHeight =
        !helperErrorExists ? 0 : helperError.size.height + subtextGap;

The subtextGap is a static constant and equal to 8.0. Unfortunately, there's no easy way to override that value.

user_13219170

I tried to change text height, but I noticed that the animation is jumping.

I found another solution. Problem located in material/input_decorator.dart file. In _RenderDecoration class. It contains:

static const double subtextGap = 8.0;

I copied all files, remove InputDecorationTheme and changed value to 0.0.

It also contains InputDecoration. I extended InputDecoration and remove override methods:

class CustomInputDecoration extends InputDecoration

And then i used it in the component:

TextFormField(
      decoration: CustomInputDecoration(...)

My flutter version: 2.2.1. I noticed that flutter team often rewrites components, so be careful! There may be changes in next releases.

user_160952460
Related