Flutter login screen template 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 :

Go through the below tutorial for more implementation details.

Project Structure :

This image depicts the project structure for flutter 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 {
  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 {
  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(validateEmail) {
  return TextFormField(
    keyboardType: TextInputType.emailAddress,
    decoration: InputDecoration(
      labelText: 'Email Address',
      hintText: 'abc@email.com',
    ),
    validator:
    validateEmail, //passing the reference of the validation mixin, not calling directly
    onSaved: (String value) {
      email = value;
    },
  );
}

Widget password field we are passing validation as a parameter

Widget passwordField(validatePassword) {
  return TextFormField(
    obscureText: true,
    decoration: InputDecoration(
      labelText: 'Password',
      hintText: 'Password',
    ),
    validator: validatePassword,
    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(validateEmail) {
  return TextFormField(
    keyboardType: TextInputType.emailAddress,
    decoration: InputDecoration(
      labelText: 'Email Address',
      hintText: 'abc@email.com',
    ),
    validator:
    validateEmail, //passing the reference of the validation mixin, not calling directly
    onSaved: (String value) {
      email = value;
    },
  );
}

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

Widget submitButton(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 flutter 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>();

  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),
              ],
            ),
          ),
        ),
      ),
    );
  }
}