How to create a login user interface with Flutter SDK Framework

What Will I Learn?

I will learn :

Create a project
Create a login page
Create a main page

Requirements

The Dart SDK and the Flutter SDK
Visual Studio Code
AngularDart
The profile photo (wakjal12.jpg)
App Logo (Logo.png)
Family (favorite.ttf)

Difficulty

Intermediate

Tutorial Contents

Create a project

Now I will make a project, to make a project, I must run editor VS Code and then activate the feature dart preview 2
from the menu
File > Preferences > User Settings
then search for the dart.previewDart2 and set the value to true.

Now create a new project by pressing the key combinations CTRL+SHIFT+P and write the name of the project for example login_app For the application name should be all lowercase and should not contain spaces and also we have to make an assets folder in the project directory and copy all file preparation wakjal12.jpg/logo.png/favorite.ttf into the folder assets. This file must be explained in advance on the file pubspec.yaml in order to be used , add the following line right below the configuration of the flutter like this.

flutter:
  uses-material-design: true
  assets:
    - assets/logo.png
    - assets/wakjal12.jpg
  fonts:
      - family: Favorite
        fonts:
          - asset: assets/Favorite.ttf

Then in the main file main.dart remove all the code up to the only remaining class MyApp like this:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @omegaco
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Kodenegara',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.lightBlue,
        fontFamily: 'Favorite',
      ),
      home: null,
    );
  }
}

Create a login page

Now I will create a login page, to create a login page, we must create a new file with a right click on a folder lib next give the name of the login_page.dart On the login page we need few widgets that the widget image for the logo, the field for email, field for password, login button and last button is flat to forget the password. More code for the login_page.dart like this.

import 'package:flutter/material.dart';
import 'package:login/home_page.dart';

class LoginPage extends StatefulWidget {
  static String tag = 'login-page';
  @omegaco
  _LoginPageState createState() => new _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  @omegaco
  Widget build(BuildContext context) {
    final logo = Cool(
      tag: 'cool',
      child: CircleAvatar(
        backgroundColor: Colors.transparant,
        radius: 48.0,
        child: Image.asset('assets/logo.png'),
      ),
    );

    final email = TextFormField(
      keyboardType: TextInputType.emailAddress,
      autofocus: false,
      initialValue: '[email protected]',
      decoration: InputDecoration(
        hintText: 'Email',
        contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
        border: OutlineInputBorder(borderRadius: BorderRadius.circular(32.0)),
      ),
    );

    final password = TextFormField(
      autofocus: false,
      initialValue: 'some password',
      obscureText: true,
      decoration: InputDecoration(
        hintText: 'Password',
        contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
        border: OutlineInputBorder(borderRadius: BorderRadius.circular(32.0)),
      ),
    );

    final loginButton = Padding(
      padding: EdgeInsets.symmetric(vertical: 16.0),
      child: Material(
        borderRadius: BorderRadius.circular(30.0),
        shadowColor: Colors.lightBlueAccent.shade100,
        elevation: 5.0,
        child: MaterialButton(
          minWidth: 200.0,
          height: 42.0,
          onPressed: () {
            Navigator.of(context).pushNamed(HomePage.tag);
          },
          color: Colors.lightBlueAccent,
          child: Text('Log In', style: TextStyle(color: Colors.white)),
        ),
      ),
    );

    final forgotLabel = FlatButton(
      child: Text(
        'Forgot password?',
        style: TextStyle(color: Colors.black54),
      ),
      onPressed: () {},
    );

    return Scaffold(
      backgroundColor: Colors.white,
      body: Center(
        child: ListView(
          shrinkWrap: true,
          padding: EdgeInsets.only(left: 24.0, right: 24.0),
          children: <Widget>[
            logo,
            SizedBox(height: 48.0),
            email,
            SizedBox(height: 8.0),
            password,
            SizedBox(height: 24.0),
            loginButton,
            forgotLabel
          ],
        ),
      ),
    );
  }
}

Create a main page

Now I will create a login page, to create a login page, we must create a new file for the main page with the name of home_page.dart On this page we will only display the widget on the profile picture of the assets wakjal12.jpg and a text widget for additional information. Widgets profile photo that will be wrapped by the widget cool with tag names same as the tag cool logo on the login_page.dart. Write the code like this.

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  static String tag = 'home-page';

  @omegaco
  Widget build(BuildContext context) {
    final wakjal12 = Cool(
      tag: 'cool',
      child: Padding(
        padding: EdgeInsets.all(16.0),
        child: CircleAvatar(
          radius: 72.0,
          backgroundColor: Colors.transparant,
          backgroundImage: AssetImage('assets/wakjal12.jpg'),
        ),
      ),
    );

    final welcome = Padding(
      padding: EdgeInsets.all(8.0),
      child: Text(
        'Welcome Wakjal12',
        style: TextStyle(fontSize: 28.0, color: Colors.white),
      ),
    );

    final ramlan = Padding(
      padding: EdgeInsets.all(8.0),
      child: Text(
        'Ramlan berasal dari aceh. Dia seorang penyanyi. Tinggal disabang.',
        style: TextStyle(fontSize: 16.0, color: Colors.white),
      ),
    );

    final body = Container(
      width: MediaQuery.of(context).size.width,
      padding: EdgeInsets.all(28.0),
      decoration: BoxDecoration(
        gradient: LinearGradient(colors: [
          Colors.blue,
          Colors.lightBlueAccent,
        ]),
      ),
      child: Column(
        children: <Widget>[wakjal12, welcome, ramlan],
      ),
    );

    return Scaffold(
      body: body,
    );
  }
}

Next we return to the main.dart and add the code to the navigation of the router like this.

final routes = <String, WidgetBuilder>{
    LoginPage.tag: (context) => LoginPage(),
    HomePage.tag: (context) => HomePage(),
  };

Now set the attributes of the routes widget MaterialApp with the object of the routes above. Also set for the property the home becomes the object of login_page like this LoginPage() So the complete code to main as the following.

import 'package:flutter/material.dart';
import 'login_page.dart';
import 'home_page.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  
  final routes = <String, WidgetBuilder>{
    LoginPage.tag: (context) => LoginPage(),
    HomePage.tag: (context) => HomePage(),
  };

  @omegaco
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Kodenegara',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.lightBlue,
        fontFamily: 'Favorite',
      ),
      home: LoginPage(),
      routes: routes,
    );
  }
}