Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

flutter

dart

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,
                ),
              ),
like image 773
Jwildsmith Avatar asked Jan 07 '19 04:01

Jwildsmith


1 Answers

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,
    )
)
like image 70
monmonja Avatar answered Oct 06 '22 19:10

monmonja