Flutter Login Screen: A Step-by-Step Tutorial

Flutter Login Screen :

Flutter login screen template is provided in this tutorial for beginners, we design a screen with a proper validations for both username and password fields.

Every app will have a login screen which is used to validate the genuine users and provide them services according to their requirements.

Logins are also segregated according to the admins, normal users and so on.

In this tutorial we will be designing a flutter login screen template using which we can even validate the user credentials also in this screen.

After successful validations we will login to the further process in the app currently we are displaying status in this example.

As we know flutter is both for Android and iOS devices following this tutorial we can design for both the devices.

 

Flutter Login Screen Video Tutorial :

Refer to the following tutorial for a more detailed explanation and further implementation details.

 

Project Structure :

The following image illustrates the project structure for the login screen tutorial.

 

pubspec.yaml :

Add a image to be displayed in login screen under assets folder.

assets:
  - assets/login.png

 

 

main.dart :

Initialize void main()

 

Define a MyApp() class extending a StatelessWidget

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Login',
      home: Scaffold(
        body: LoginScreen(),
      ),
    );
  }
}

 

 

import 'package:flutter/material.dart';
import 'package:flutter_login_form/login_screen.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Login',
      home: Scaffold(
        body: LoginScreen(),
      ),
    );
  }
}

 

 

widget.dart :

Add a widget image to populate a image to screen when ever called and also provide the dimensions

Widget imageField() {
  return Image.asset(
    'assets/login.png',
    width: 200,
    height: 200,
  );
}

 

 

Widget email field for accepting user input email address

Widget emailField(Function validateEmail) {
  return TextFormField(
    keyboardType: TextInputType.emailAddress,
    decoration: InputDecoration(
      labelText: 'Email Address',
      hintText: 'abc@email.com',
    ),
    validator: (value) => validateEmail(value),
    onSaved: (String value) {
      email = value;
    },
  );
}

 

 

Widget password field we are passing validation as a parameter

Widget passwordField(Function validatePassword) {
  return TextFormField(
    obscureText: true,
    decoration: InputDecoration(
      labelText: 'Password',
      hintText: 'Password',
    ),
    validator: (value) => validatePassword(value),
    onSaved: (String value) {
      password = value;
    },
  );
}

 

 

import 'package:flutter/material.dart';

String email = '';
String password = '';

Widget imageField() {
  return Image.asset(
    'assets/login.png',
    width: 200,
    height: 200,
  );
}

Widget emailField(Function validateEmail) {
  return TextFormField(
    keyboardType: TextInputType.emailAddress,
    decoration: InputDecoration(
      labelText: 'Email Address',
      hintText: 'abc@email.com',
    ),
    validator: validateEmail,
    onSaved: (String value) {
      email = value;
    },
  );
}

Widget passwordField(Function validatePassword) {
  return TextFormField(
    obscureText: true,
    decoration: InputDecoration(
      labelText: 'Password',
      hintText: 'Password',
    ),
    validator: validatePassword,
    onSaved: (String value) {
      password = value;
    },
  );
}

Widget submitButton(GlobalKey<FormState> formKey) {
  return RaisedButton(
    color: Colors.red,
    child: Text(
      'Login',
      style: TextStyle(color: Colors.white),
    ),
    onPressed: () {
      if (formKey.currentState.validate()) {
        formKey.currentState.save();
      }
    },
  );
}

 

 

validation.dart :

Add validations for both email and password which will return null if not true.

class Validation {
  String validateEmail(String value) {
    if (!value.contains('@')) {
      return 'Please enter a valid email';
    }
    return null;
  }
}

 

String validatePassword(String value) {
  if (value.length < 8) {
    return 'Password must be more than 8 characters';
  }
  return null;
}

 

 

login_screen.dart :

Create a login screen as a StatefulWidget as we are processing the user credentials and there after printing the result.

class LoginScreen extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return LoginScreenState();
  }
}

 

 

Add image, email, passwords and submit button widgets which we have specified in widgets.dart to the screen

children: <Widget>[
  imageField(),
  emailField(validateEmail),
  passwordField(validatePassword),
  SizedBox(height: 40),
  submitButton(formKey),
],

 

FullCode :

Providing full code for login screen integrations in your app.

import 'package:flutter/material.dart';
import 'package:flutter_login_form/validation.dart';
import 'package:flutter_login_form/widget.dart';

class LoginScreen extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return LoginScreenState();
  }
}

class LoginScreenState extends State<LoginScreen> with Validation {
  final formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.all(20.0),
      child: Center(
        child: Form(
          key: formKey,
          child: Padding(
            padding: const EdgeInsets.all(40.0),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                imageField(),
                emailField(validateEmail),
                passwordField(validatePassword),
                SizedBox(height: 40),
                submitButton(formKey),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

 

 

Flutter login screen output :

This screen depicts the flutter login template screen design with validations.

If you have any questions, feel free to drop them in the comments below. If you enjoyed this tutorial, show us some love by liking and sharing for more exciting updates