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 😌 ?
Here is the final result of our app 😉
As you might have seen, this is a login UI built with the superb Flutter SDK.
This tutorial assumes a little knowledge of Flutter or Dart. JavaScript knowledge will be helpful as well, especially ES6 features. You should have:
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.
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 the ios
folder 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 a main.dart
file, 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 the package.json
file 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.
Head over to pubspec.yaml
file and amend it like the following:
1//../pubspec.yaml 2 name: flutter_login_ui 3 description: A new Flutter project. 4 # The following defines the version and build number for your application. 5 # A version number is three numbers separated by dots, like 1.2.43 6 # followed by an optional build number separated by a +. 7 # Both the version and the builder number may be overridden in flutter 8 # build by specifying --build-name and --build-number, respectively. 9 # Read more about versioning at semver.org. 10 version: 1.0.0+1 11 environment: 12 sdk: ">=2.0.0-dev.68.0 <3.0.0" 13 dependencies: 14 flutter: 15 sdk: flutter 16 # The following adds the Cupertino Icons font to your application. 17 # Use with the CupertinoIcons class for iOS style icons. 18 cupertino_icons: ^0.1.2 19 dev_dependencies: 20 flutter_test: 21 sdk: flutter 22 # For information on the generic Dart part of this file, see the 23 # following page: https://www.dartlang.org/tools/pub/pubspec 24 # The following section is specific to Flutter. 25 flutter: 26 # The following line ensures that the Material Icons font is 27 # included with your application, so that you can use the icons in 28 # the material Icons class. 29 uses-material-design: true 30 # To add assets to your application, add an assets section, like this: 31 assets: 32 - logo.png 33 fonts: 34 - family: Montserrat 35 fonts: 36 - 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.
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:
Then we define our MyApp
widget. Amend your MyApp
class like the following (only change the title property) :
1class MyApp extends StatelessWidget { 2 // This widget is the root of your application. 3 @override 4 Widget build(BuildContext context) { 5 return MaterialApp( 6 title: 'Flutter login UI', 7 theme: ThemeData( 8 // This is the theme of your application. 9 // 10 // Try running your application with "flutter run". You'll see the 11 // application has a blue toolbar. Then, without quitting the app, try 12 // changing the primarySwatch below to Colors.green and then invoke 13 // "hot reload" (press "r" in the console where you ran "flutter run", 14 // or simply save your changes to "hot reload" in a Flutter IDE). 15 // Notice that the counter didn't reset back to zero; the application 16 // is not restarted. 17 primarySwatch: Colors.blue, 18 ), 19 home: MyHomePage(title: 'Flutter Login'), 20 ); 21 } 22 }
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:
1class MyApp extends StatelessWidget { 2 // ... 3 }
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!
1class MyHomePage extends StatefulWidget { 2 MyHomePage({Key key, this.title}) : super(key: key); 3 // This widget is the home page of your application. It is stateful, meaning 4 // that it has a State object (defined below) that contains fields that affect 5 // how it looks. 6 // This class is the configuration for the state. It holds the values (in this 7 // case the title) provided by the parent (in this case the App widget) and 8 // used by the build method of the State. Fields in a Widget subclass are 9 // always marked "final". 10 final String title; 11 @override 12 _MyHomePageState createState() => _MyHomePageState(); 13 }
The following class will be responsible for defining our MyHomePage
widget state. Amend it like the following:
1class _MyHomePageState extends State<MyHomePage> { 2 TextStyle style = TextStyle(fontFamily: 'Montserrat', fontSize: 20.0); 3 4 @override 5 Widget build(BuildContext context) { 6 7 final emailField = TextField( 8 obscureText: false, 9 style: style, 10 decoration: InputDecoration( 11 contentPadding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0), 12 hintText: "Email", 13 border: 14 OutlineInputBorder(borderRadius: BorderRadius.circular(32.0))), 15 ); 16 final passwordField = TextField( 17 obscureText: true, 18 style: style, 19 decoration: InputDecoration( 20 contentPadding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0), 21 hintText: "Password", 22 border: 23 OutlineInputBorder(borderRadius: BorderRadius.circular(32.0))), 24 ); 25 final loginButon = Material( 26 elevation: 5.0, 27 borderRadius: BorderRadius.circular(30.0), 28 color: Color(0xff01A0C7), 29 child: MaterialButton( 30 minWidth: MediaQuery.of(context).size.width, 31 padding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0), 32 onPressed: () {}, 33 child: Text("Login", 34 textAlign: TextAlign.center, 35 style: style.copyWith( 36 color: Colors.white, fontWeight: FontWeight.bold)), 37 ), 38 ); 39 40 return Scaffold( 41 body: Center( 42 child: Container( 43 color: Colors.white, 44 child: Padding( 45 padding: const EdgeInsets.all(36.0), 46 child: Column( 47 crossAxisAlignment: CrossAxisAlignment.center, 48 mainAxisAlignment: MainAxisAlignment.center, 49 children: <Widget>[ 50 SizedBox( 51 height: 155.0, 52 child: Image.asset( 53 "assets/logo.png", 54 fit: BoxFit.contain, 55 ), 56 ), 57 SizedBox(height: 45.0), 58 emailField, 59 SizedBox(height: 25.0), 60 passwordField, 61 SizedBox( 62 height: 35.0, 63 ), 64 loginButon, 65 SizedBox( 66 height: 15.0, 67 ), 68 ], 69 ), 70 ), 71 ), 72 ), 73 ); 74 } 75 }
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
:1final emailField = TextField( 2 style: style, 3 decoration: InputDecoration( 4 contentPadding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0), 5 hintText: "Email", 6 border: 7 OutlineInputBorder(borderRadius: BorderRadius.circular(32.0))), 8 );
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
1final passwordField = TextField( 2 obscureText: true, 3 style: style, 4 decoration: InputDecoration( 5 contentPadding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0), 6 hintText: "Password", 7 border: 8 OutlineInputBorder(borderRadius: BorderRadius.circular(32.0))), 9 );
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
1final loginButon = Material( 2 elevation: 5.0, 3 borderRadius: BorderRadius.circular(30.0), 4 color: Color(0xff01A0C7), 5 child: MaterialButton( 6 minWidth: MediaQuery.of(context).size.width, 7 padding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0), 8 onPressed: () {}, 9 child: Text("Login", 10 textAlign: TextAlign.center, 11 style: style.copyWith( 12 color: Colors.white, fontWeight: FontWeight.bold)), 13 ), 14 );
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 🙃 .
1return Scaffold( 2 body: Center( 3 child: Container( 4 color: Colors.white, 5 child: Padding( 6 padding: const EdgeInsets.all(36.0), 7 child: Column( 8 crossAxisAlignment: CrossAxisAlignment.center, 9 mainAxisAlignment: MainAxisAlignment.center, 10 children: <Widget>[ 11 SizedBox( 12 height: 155.0, 13 child: Image.asset( 14 "assets/logo.png", 15 fit: BoxFit.contain, 16 ), 17 ), 18 SizedBox(height: 45.0), 19 emailField, 20 SizedBox(height: 25.0), 21 passwordField, 22 SizedBox( 23 height: 35.0, 24 ), 25 loginButon, 26 SizedBox( 27 height: 15.0, 28 ), 29 ], 30 ), 31 ), 32 ), 33 ), 34 );
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
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.