Styling Flutter Forms

In this lesson, we will work more on our Login page styling:

But keep in mind that we are not going to discuss the complete design. We are going to use Flutter's Material design to style our login page, not a custom design.

Changing the Layout

Let's start our changes by surrounding our Column with a Container widget. With this, we will set the background color of the Container to the primary color of the theme:

return MaterialApp(
    title: 'Welcome to Flutter',
    home: Scaffold(
        appBar: AppBar(
          title: Text('Login'),
        ),
        body: Column(
        body: Container(
          color: Theme.of(context).primaryColor,
          child: Column(
          children: <Widget>[
            TextField(
              keyboardType: TextInputType.emailAddress,
              decoration: InputDecoration(
                border: OutlineInputBorder(),
                labelText: 'Email',
              ),
            ),
            TextField(
              keyboardType: TextInputType.visiblePassword,
              decoration: InputDecoration(
                border: OutlineInputBorder(),
                labelText: 'Password',
              ),
            ),
            ElevatedButton(
              onPressed: () {
                print('Login button pressed');
              },
              child: Text('Login'),
              style: ElevatedButton.styleFrom(
                backgroundColor: Colors.blue,
                foregroundColor: Colors.white,
                minimumSize: Size(double.infinity, 36),
              ),
            ),
          ],
        )),
        ));
}

This will result in our login page having a purple background color:

Making it Card-like

Next, we want to make it look like a card. We can do this by adding a Card widget around our Column:

Widget build(BuildContext context) {
return MaterialApp(
    title: 'Welcome to Flutter',
    home: Scaffold(
      appBar: AppBar(
        title: Text('Login'),
      ),
      body: Container(
          color: Theme.of(context).primaryColor,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Card(
                elevation: 0,
                margin: EdgeInsets.only(left: 20, right: 20),
                child: Padding(
                  padding: EdgeInsets.all(20),
                  child: Column(
                    children: [
                      TextField(
                        keyboardType: TextInputType.emailAddress,
                        decoration: InputDecoration(
                          border: OutlineInputBorder(),
                          labelText: 'Email',
                        ),
                      ),
                      TextField(
                        keyboardType: TextInputType.visiblePassword,
                        decoration: InputDecoration(
                          border: OutlineInputBorder(),
                          labelText: 'Password',
                        ),
                      ),
                      ElevatedButton(
                        onPressed: () {
                          print('Login button pressed');
                        },
                        child: Text('Login'),
                        style: ElevatedButton.styleFrom(
                          backgroundColor: Colors.blue,
                          foregroundColor: Colors.white,
                          minimumSize: Size(double.infinity, 36),
                        ),
                      ),
                    ],
                  ),
                ),
              )
            ],
          )),
    ));
}

This will result in our login page looking like a card:

But what did we actually do?

1. We added a Card widget around our Column.
2. To remove the shadow, we set the elevation property of the Card to 0.
3. We set the margin property of the Card to EdgeInsets.only(left: 20, right: 20) to add some margin to the card on the left and right.
4. We added a Padding widget around our Column to add padding to the card.
5. We set the padding property of the Padding widget to EdgeInsets.all(20) to add padding to all sides of the card.
6. We set the mainAxisAlignment property of the Column to MainAxisAlignment.center to center the card vertically.

Adding Padding

As we can see, our input fields are really close together. While this might not be an issue, we still want to add some padding.

There are a couple of ways of doing this.

1. We can wrap our TextField widgets with a Padding widget.
2. We can add SizedBox widgets between our TextField widgets.

For the sake of this form example (and because we already have a Padding widget on our Card), we will use the SizedBox widget:

child: Column(
    children: [
      TextField(
        keyboardType: TextInputType.emailAddress,
        decoration: InputDecoration(
          border: OutlineInputBorder(),
          labelText: 'Email',
        ),
      ),
      SizedBox(height: 20),
      TextField(
        keyboardType: TextInputType.visiblePassword,
        decoration: InputDecoration(
          border: OutlineInputBorder(),
          labelText: 'Password',
        ),
      ),
      SizedBox(height: 20),
      ElevatedButton(
        onPressed: () {
          print('Login button pressed');
        },
        child: Text('Login'),
        style: ElevatedButton.styleFrom(
          backgroundColor: Colors.blue,
          foregroundColor: Colors.white,
          minimumSize: Size(double.infinity, 36),
        ),
      ),
    ],
  ),

This may not be ideal, but we are just trying to show you different ways of adding padding to your widgets.

Note: We will continue to use the SizedBox widget to add padding between our widgets for Forms, but you can pick one and stick with it.

In the next lesson, we will move the Login page to a separate file and add a Registration page. Then, we will configure the navigation between the two pages.

Check out the GitHub Commit for this lesson.