Building a flutter project an understanding the terms

First the project is developed in visual studio code hitting ctrl+shift+p or cmd+shift+p and giving
it a name.
 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.

Defining assets
The images, fonts and icons are stored here.
//../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
Creating an assets and fonts directories into the root of your Flutter project. we should
respectively find their content and add a picture.png to our ../assets folder and th fonts.ttf font to
our ../fonts folder.

Build the UI
First, we import the Material library from Flutter:
import 'package:flutter/material.dart';
Among those are the MaterialApp, Scaffold, and AppBar widgets using inside our app. The
methods that 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.
@override
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 defineing 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;
@override
_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);

@override
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);

Firstly, defining 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
[ CITATION Flu19 \l 1033 ]