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:

For the first part of the series, this will be the output. Left: Initial UI. Right: UI change while pressing the “NEXT” button. — For the first part of the series, this will be the output. **Left: Initial UI. Right: UI change while pressing the “NEXT” button.**

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.

Don’t forget to Override the _LoginPageState class — Don’t forget to **Override** the `_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:

Don’t fret! Click on the image, I know there are too many parentheses 😜

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.