Courses

Flutter 3 Mobile App with Laravel 12 API

Styling Flutter Forms

You're reading a FREE PREVIEW of a PREMIUM course.
Login Or Join Premium ($129/year or $29/mo)

Link to the repository

[Only for premium members]

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...

The full lesson is only for Premium Members.
Want to access all 26 text lessons of this course? (116 min read)

You also get:

  • 77 courses
  • Premium tutorials
  • Access to repositories
  • Private Discord