CODEWITHSUNDEEP
user-interfacedartuitextfieldflutter
marcelo.wdrb
marcelo.wdrb

Reputation: 2339

Space between TextFormFields

I am working on a Flutter app.
I have this dart code: 

List<Widget> buildInputs() {
    return[
      new Container(
        padding: new EdgeInsets.only(
          top: 20.0,
          right: 40.0,
          left: 40.0,
        ),
        child: new Column(
          children: <Widget>[
            new TextFormField(
              decoration: new InputDecoration(labelText: 'E-Mail', contentPadding: new EdgeInsets.only(bottom: 1.0)),
              validator: (value) => value.isEmpty ? 'Email can\'nt be empty' : null,
              onSaved: (value) => _email = value,
              ),
            new TextFormField(
              decoration: new InputDecoration(labelText: 'Password', contentPadding: new EdgeInsets.only(bottom: 1.0)),
              obscureText: true,
              validator: (value) => value.isEmpty ? 'Password can\'nt be empty' : null,
              onSaved: (value) => _password = value,
            ),
          ],
        ),
      ),
    ];
  }

As you can see I use this: contentPadding: new EdgeInsets.only(bottom: 1.0)
I use this that the title of the TextFormField is closer too the TextFormFieldLine.
Now, how to add a top space between the two TextFormFields.

Upvotes: 3

Views: 9295

Answers (3)

Josh Hick
Josh Hick

Reputation: 59

You could also use Wrap(runSpacing:8, children:[])

Upvotes: 3

anmol.majhail
anmol.majhail

Reputation: 51206

There Are Few Ways to get it Done :

1st Padding Widget: Wrap With Form Field with Padding Widget

Column(
            children: <Widget>[
              Padding(
                padding: EdgeInsets.only(top: 25.0),
                child: new TextFormField(
                  decoration: new InputDecoration(
                      labelText: 'E-Mail',
                      contentPadding: new EdgeInsets.only(bottom: 1.0)),
                  validator: (value) =>
                      value.isEmpty ? 'Email can\'nt be empty' : null,
                  // onSaved: (value) => _email = value,
                ),
              ),
              Padding(
                padding: EdgeInsets.only(top: 25.0),
                child: new TextFormField(
                  decoration: new InputDecoration(
                      labelText: 'Password',
                      contentPadding: new EdgeInsets.only(bottom: 1.0)),
                  obscureText: true,
                  validator: (value) =>
                      value.isEmpty ? 'Password can\'nt be empty' : null,
                  // onSaved: (value) => _password = value,
                ),
              ),
            ],
          ),

2nd SizedBox Widget: I prefer this method to add space between Form Fields as its clean & less Code.

Column(
            children: <Widget>[
              new TextFormField(
                decoration: new InputDecoration(
                    labelText: 'E-Mail',
                    contentPadding: new EdgeInsets.only(bottom: 1.0)),
                validator: (value) =>
                    value.isEmpty ? 'Email can\'nt be empty' : null,
                // onSaved: (value) => _email = value,
              ),
              SizedBox(height: 25.0,),
              new TextFormField(
                decoration: new InputDecoration(
                    labelText: 'Password',
                    contentPadding: new EdgeInsets.only(bottom: 1.0)),
                obscureText: true,
                validator: (value) =>
                    value.isEmpty ? 'Password can\'nt be empty' : null,
                // onSaved: (value) => _password = value,
              ),
            ],
          ),

Upvotes: 10

boformer
boformer

Reputation: 30103

You can just add a SizedBox (a very basic widget without decoration) between the text fields:

SizedBox(height: 8.0)

Upvotes: 5

Related Questions