Make a Material Design login page with Flutter — The Basics
From scratch!⚡
Vaibhav Khulbe
Where was I?
Such a long break it was. My last blog post came a month ago 👀. You see, it’s not like I just vanished from the web, I achieved a quite great deal of stuff in between this period.
I’m happy to tell you all that now I’m a Udacity’s Android Developer Nanodegree graduate! But you didn’t come here for hearing this right? So, I thought why not come full circle here on Codeburst and start with Flutter again! Exciting, right?
What will I make?
This:

What will I need? 🛠️
- H̸a̸m̸m̸e̸r̸ ̸a̸n̸d̸ ̸w̸r̸e̸n̸c̸h̸
- Your already wonderful Dart, Flutter and Material Design skills.
- Flutter installed on your machine! 😌
- A text editor (like my favorite VS Code) or a preferred IDE like IntelliJ IDEA with Flutter plugin installed. See how to here and here respectively.
Shall we, Materialise❔
The Basics (Part — 1 of this series) will have a simple app login screen with the app logo, app name, two text boxes, and two buttons for login and cancel. That doesn’t contain anything Material right? So we will cover the following Material Design Components (MDC) here:
- Text field
- Button
- Ripple
I will be using IntelliJ IDEA for this project. First steps first, we need to create a Flutter project. See how to. After you’re done with the basic app template which Flutter provides, perform the following steps:
- Remove all the code from lib > main.dart file. Yes, we’ll go scratch! 😎
- Import the Material Dart library to use all the MDC:
import 'package:flutter/material.dart';
3. In the same lib folder create a new file (right-click > create a new file), name it login.dart. Again, import the Material Dart library.
4. Next, make a class named LoginPage
which will extendStatefulWidget.
This will display everything that you see in the login UI.

_LoginPageState class
5. Create a new class _LoginPageState
which will contain the code for actually building all the widgets in our UI. Just make sure this one extends
State<LoginPage>
class which we created in the previous step.
6. Override the build
method, return a Scaffold
, under this we will have everything which we need to display the MDC used.
7. To be professional here, we will use the SafeArea
class for our body
property so that all the subsequent child(s) have sufficient amount of padding. Return the first child as a ListView
, giving it a padding
of horizontal: 24.0
(these values can be changed according to your need).
8. Up next is the children
property having a SizedBox
height
of 80.0
, containing a Column
which will have the actual display elements of our UI.
9. If there isn’t already, then create a new folder inside your project root named assets (Project Name > assets) containing all the image related resources we need. Paste your favorite (I recommend Flaticon) app icon here (I’ve named mine as login_icon). You can also make additional 2.0x or 3.0x folders insider our assets folder for different screen sizes (2.0x contains icons sized 64x64px while 3.0x have icons with the size of 128x128px). For our icons to work, make sure in the pubspec.yaml file you have the following declaration under flutter:
assets:
- assets/login_icon.png
Finally, now it’s time to add in the logo (phew!). Use the Image
class which will find the login_icon.png file inside the assets folder.
10. We will have our Text Field and Buttons inside a SizedBox
. Make sure you give it a respectable height. Add a TextField
, give it a decoration
of InputDecoration
with labelText
set to the text that will be displayed inside the TextField
and giving it a filled
boolean value to true
. Optionally, you can add a Spacer
using SizedBox
to control the spacing between the widgets.
Do the same for the password Text Field. Well, a password isn’t actually a password until it’s shown with bullet dots right? So we write obscureText: true
, after our password TextField
which automatically replaces the input that the user types with dots. 😲
11. At last, we’re here to add Buttons. Under the password TextField
, add a ButtonBar
to arrange its children in a row. For the “CANCEL” button we’ll use FlatButton
class which emphasizes the user less to tap on it than the RaisedButton
class which'll be used for our primary action. i.e. "LOGIN".
Both of them have a child
of Text
to be displayed on the button along with an onPressed()
method which invokes the action to be performed when you tap that button.
That’s it! You’ll get the above UI output when you run your project. If you want the code of the _LoginPageState
class’s build
method, then here it is:

Where to next? 🤔
This was the first part of the Material login page UI design covering just The Basics of Material Design implementations along with three simple MDCs we used (or will, next).
If you’re new to the Flutter or Dart world then I have created a GitHub repository which is designed just for you! You want to learn all the basics and explanation of the classed/methods used in Flutter? Then, just head on to Knockdown Flutter repo.
The repo is in continuous development, I’ll push new projects whenever I feel free. Also, if you’re an experienced Flutter developer, then you can definitely help me by contributing to the repo!
Enough of that repo, you should definitely check out the next parts of this series to get a really beautiful Material login page UI.
Upvote
Vaibhav Khulbe
Freelance web developer/designer/blogger.

Related Articles