Build a login UI with Flutter
You will need Flutter set up on your machine. This tutorial assumes you are using Visual Studio Code for development.
Introduction
Hey folks, in this tutorial we’ll take a look at the new Google SDK to develop reliable and great mobile apps: Flutter. We’ll build a nice UI using Flutter SDK.
According to its official site,
Flutter allows you to build beautiful native apps on iOS and Android from a single codebase.
Flutter enables developers to quickly develop and in an efficient way native mobile apps that can run both onAndroid and iOS devices. Isn’t that great 😌 ?
Demo
Here is the final result of our app 😉
As you might have seen, this is a login UI built with the superb Flutter SDK.
Prerequisites
This tutorial assumes a little knowledge of Flutter or Dart. JavaScript knowledge will be helpful as well, especially ES6 features.
You should have:
- Visual Studio Code editor installed on your machine if you haven’t yet. We’ll use it in our tutorial.
- Visual Studio Code Flutter plugin
Project setup
Important: We’ll mainly focus on building our beautiful app. For this section, you can take a look here. This link is very helpful and will guide you through the installation of Flutter SDK on your machine(if you haven’t yet) regarding your OS.
Now, open your code editor and hit ctrl+shift+p or cmd+shift+p to create a new project, and give it a name, or simply run flutter create your_project_name.
After that, you’ll end up with a fresh Flutter project.
Directory structure
Once the project is created, drag it into VS code. We’re using VS code because it has the most complete Flutter support (Dart syntax, code completion, debugging tools).
By default, you should see the following directory structure:
android- where Android-related files are stored. If you’ve done any sort of cross-platform mobile app development before, this, along with theiosfolder should be pretty familiar.ios- where iOS-related files are stored.lib- this is where you’ll be working on most of the time. By default, it contains amain.dartfile, this is the entry point file of the Flutter app.test- this is where you put the unit testing code for the app. We won’t really be working on it in this tutorial.pubspec.yaml- this file defines the version and build number of your app. It’s also where you define your dependencies. If you’re coming from a web development background, this file has the same job description as thepackage.jsonfile so you can define the external packages (from the Dart packages website) you want to use in here.
Note that I’ve skipped on other folders and files because most of the time you won’t really need to touch them.
Defining our assets
Head over to pubspec.yaml file and amend it like the following:
//../pubspec.yaml
name: flutter_login_ui
description: A new Flutter project.
# The following defines the version and build number for your application.
# A version number is three numbers separated by dots, like 1.2.43
# followed by an optional build number separated by a +.
# Both the version and the builder number may be overridden in flutter
# build by specifying --build-name and --build-number, respectively.
# Read more about versioning at semver.org.
version: 1.0.0+1
environment:
sdk: ">=2.0.0-dev.68.0 <3.0.0"
dependencies:
flutter:
sdk: flutter
# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^0.1.2
dev_dependencies:
flutter_test:
sdk: flutter
# For information on the generic Dart part of this file, see the
# following page: https://www.dartlang.org/tools/pub/pubspec
# The following section is specific to Flutter.
flutter:
# The following line ensures that the Material Icons font is
# included with your application, so that you can use the icons in
# the material Icons class.
uses-material-design: true
# To add assets to your application, add an assets section, like this:
assets:
- logo.png
fonts:
- family: Montserrat
fonts:
- asset: fonts/Montserrat-Regular.ttf
Create assets and fonts directories into the root of your Flutter project. You should respectively find their content at this link and here.
We add a logo.png to our ../assets folder and the Montserrat-Regular.ttf font to our ../fonts folder. Further in the tutorial we’ll make use of these assets in our app.
Build the UI
Let’s take a look at the ..lib/main.dart file and break down things:
First, we import the Material library from Flutter:
import 'package:flutter/material.dart';
Among those are the MaterialApp, Scaffold, and AppBar widgets that we’re using inside our app. The methods that we’re using are either part of a library you’ve imported, or part of the Flutter framework itself.
After that comes the following line:
void main() => runApp(MyApp())
Well, this is the entry point of our whole program so it must always be defined if you want to render something on the screen. But what about the fat-arrow (=>)? If you’re familiar with ES6 features in JavaScript, this is pretty much the same. It’s just a more concise way of defining functions, so we’re actually running the runApp() function inside the main() function. This function makes the MyApp widget the root of the widget tree. This effectively renders the widget, along with its children into the screen.
Note that almost everything in Flutter is a widget, and each one can have its own set of properties and child widgets. We have two main types of widget in Flutter:
- Stateful widget: manages its own internal state and keeps track of it.
- Stateless widget: while this kind of widget doesn’t. For example a button doesn’t need to track of anything.
Then we define our MyApp widget. Amend your MyApp class like the following (only change the title property) :
class MyApp extends StatelessWidget {
// This widget is the root of your application.
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter login UI',
theme: ThemeData(
// This is the theme of your application.
//
// Try running your application with "flutter run". You'll see the
// application has a blue toolbar. Then, without quitting the app, try
// changing the primarySwatch below to Colors.green and then invoke
// "hot reload" (press "r" in the console where you ran "flutter run",
// or simply save your changes to "hot reload" in a Flutter IDE).
// Notice that the counter didn't reset back to zero; the application
// is not restarted.
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Login'),
);
}
}
The code above returns a new MaterialApp widget defining our app title, our app theme, and our home page. As you can notice, it is a stateless widget. To create a stateless widget, you need to extend the StatelessWidget class like the following:
class MyApp extends StatelessWidget {
// ...
}
Now we’ll define our home widget, this time it is a stateful widget, this means it will contain fields that affect how it looks. No change here!
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
// This widget is the home page of your application. It is stateful, meaning
// that it has a State object (defined below) that contains fields that affect
// how it looks.
// This class is the configuration for the state. It holds the values (in this
// case the title) provided by the parent (in this case the App widget) and
// used by the build method of the State. Fields in a Widget subclass are
// always marked "final".
final String title;
_MyHomePageState createState() => _MyHomePageState();
}
The following class will be responsible for defining our MyHomePage widget state. Amend it like the following:
class _MyHomePageState extends State<MyHomePage> {
TextStyle style = TextStyle(fontFamily: 'Montserrat', fontSize: 20.0);
Widget build(BuildContext context) {
final emailField = TextField(
obscureText: false,
style: style,
decoration: InputDecoration(
contentPadding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
hintText: "Email",
border:
OutlineInputBorder(borderRadius: BorderRadius.circular(32.0))),
);
final passwordField = TextField(
obscureText: true,
style: style,
decoration: InputDecoration(
contentPadding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
hintText: "Password",
border:
OutlineInputBorder(borderRadius: BorderRadius.circular(32.0))),
);
final loginButon = Material(
elevation: 5.0,
borderRadius: BorderRadius.circular(30.0),
color: Color(0xff01A0C7),
child: MaterialButton(
minWidth: MediaQuery.of(context).size.width,
padding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
onPressed: () {},
child: Text("Login",
textAlign: TextAlign.center,
style: style.copyWith(
color: Colors.white, fontWeight: FontWeight.bold)),
),
);
return Scaffold(
body: Center(
child: Container(
color: Colors.white,
child: Padding(
padding: const EdgeInsets.all(36.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
SizedBox(
height: 155.0,
child: Image.asset(
"assets/logo.png",
fit: BoxFit.contain,
),
),
SizedBox(height: 45.0),
emailField,
SizedBox(height: 25.0),
passwordField,
SizedBox(
height: 35.0,
),
loginButon,
SizedBox(
height: 15.0,
),
],
),
),
),
),
);
}
}
TextStyle style = TextStyle(fontFamily: 'Montserrat', fontSize: 20.0);
First, we define a custom text style to apply to our UI elements. We use the Montserrat font as our fontFamily.
Inside the body of the class, we need to override the build function that returns our main widget.
We then define our UI elements, two text fields and a login button:
emailField:
final emailField = TextField(
style: style,
decoration: InputDecoration(
contentPadding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
hintText: "Email",
border:
OutlineInputBorder(borderRadius: BorderRadius.circular(32.0))),
);
The final keyword simply tells our app that the object value won’t be modified throughout the app. We define an input using the TextField widget, we added a hint,some style and decoration.
We use some padding for adding an empty space inside the surrounding area of the field.
We add a borderRadius to have a fancy rounded input field 😎 .
passwordField
final passwordField = TextField(
obscureText: true,
style: style,
decoration: InputDecoration(
contentPadding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
hintText: "Password",
border:
OutlineInputBorder(borderRadius: BorderRadius.circular(32.0))),
);
The definition of the password field is almost the same as the previous one, except that we add a property obscureText: true to hide input as we are typing, like a password field should behave.
loginButton
final loginButon = Material(
elevation: 5.0,
borderRadius: BorderRadius.circular(30.0),
color: Color(0xff01A0C7),
child: MaterialButton(
minWidth: MediaQuery.of(context).size.width,
padding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
onPressed: () {},
child: Text("Login",
textAlign: TextAlign.center,
style: style.copyWith(
color: Colors.white, fontWeight: FontWeight.bold)),
),
);
We use the Material widget to add easily a shadow(elevation ) to our button. We also add a radius to have a rounded button. Last we add a button as a child our material widget which also take a Text widget as a child. Our button has an onPressed property that takes a function called whenever it is clicked.
After that we put all these widgets together inside our Scaffold widget. Our form elements are aligned vertically inside a Column widget. Generally, we use the SizedBox widget just for spacing purposes.
We add an our image inside a SizedBox in order define a height for it 🙃 .
return Scaffold(
body: Center(
child: Container(
color: Colors.white,
child: Padding(
padding: const EdgeInsets.all(36.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
SizedBox(
height: 155.0,
child: Image.asset(
"assets/logo.png",
fit: BoxFit.contain,
),
),
SizedBox(height: 45.0),
emailField,
SizedBox(height: 25.0),
passwordField,
SizedBox(
height: 35.0,
),
loginButon,
SizedBox(
height: 15.0,
),
],
),
),
),
),
);
Once everything is done, the app should already be functional. If you don’t already have the app running, launch an Android emulator or iOS simulator instance and execute the following command from the root of the project directory:
flutter run
Conclusion
That’s it! In this tutorial, you learned how to create a beautiful login UI with Flutter. You also learned some basic concepts of the Flutter SDK. I do hope you acquired necessary knowledge in order to continue exploring Flutter.
You can find the code used in this tutorial on its GitHub repo.
30 January 2019
by Ethiel Adiassa