How to create login page in flutter step by step in 2024

In this blog, we will explore How to create login page in flutter step by step in 2024. using this code you can easily create simple login page in flutter, easily learn and use this code step by step in your android studio.

How to Create Login Page in Flutter Step by Step in 2024

Step 1 : Create "LoginScreen.dart" File in your Lib folder

import 'package:flutter/material.dart';
import 'package:my_test_app/HomePage.dart';

class LoginScreen extends StatefulWidget {
const LoginScreen({super.key});

@override
State<LoginScreen> createState() => _LoginScreenState();
}

Step 2 : Create "_LoginScreenState" Class inside "LoginScreen.dart" File for create Login Design

1. Now first, create a design of login Page inside "_LoginScreenState" class

class _LoginScreenState extends State<LoginScreen> {
bool passToggle = true;
String _email = '';
final GlobalKey<FormState> _formKey = GlobalKey<FormState>();

@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
title: const Text("Login Page"),
),
body: SingleChildScrollView(
padding: const EdgeInsets.only(top: 120.0),
child: Form(
key: _formKey,
child: Column(
children: <Widget>[
Center(
child: SizedBox(
width: 200,
height: 150,
child: Image.asset('assets/images/boy.png')),
),
Padding(
padding: const EdgeInsets.only(
top: 15.0, bottom: 5.0, left: 30.0, right: 30.0),
child: TextFormField(
keyboardType: TextInputType.emailAddress,
decoration: const InputDecoration(
border: OutlineInputBorder(),
labelText: 'Email',
prefixIcon: Icon(Icons.email),
hintText: 'Enter valid email id',
),
autovalidateMode: AutovalidateMode.onUserInteraction,
onChanged: (text) => setState(() => _email = text),
),
),
Padding(
padding: const EdgeInsets.only(
left: 30.0, right: 30.0, top: 15, bottom: 10),
child: TextFormField(
obscureText: passToggle,
decoration: InputDecoration(
border: const OutlineInputBorder(),
labelText: 'Password',
hintText: 'Enter secure password',
prefixIcon: const Icon(Icons.lock),
suffixIcon: InkWell(
onTap: () {
setState(() {
passToggle = !passToggle;
});
},
child: Icon(
passToggle ? Icons.visibility : Icons.visibility_off),
),
),
autovalidateMode: AutovalidateMode.onUserInteraction,
),
),
Container(
alignment: Alignment.topRight,
padding: const EdgeInsets.only(right: 18.0),
child: TextButton(
onPressed: () {},
child: const Text(
'Forgot Password',
style: TextStyle(color: Colors.blue, fontSize: 15),
),
),
),
Container(
width: 350.0,
height: 70,
padding: const EdgeInsets.only(
left: 30.0, right: 30.0, top: 10.0, bottom: 10.0),
child: FilledButton(
onPressed: () {},
child: const Text(
'Login',
style: TextStyle(color: Colors.white, fontSize: 22),
),
),
),
TextButton(
onPressed: () {},
child: const Text(
'New User? Create Account',
style: TextStyle(color: Colors.black, fontSize: 15),
),
)
],
),
),
),
);
}
}

• We are used "_formKey" for manage the updated state of all form fields on other words with the help of "_formKey" we can easily save and get updated states of form fields.
• We are used "AutovalidateMode" for automatic check validation while filling form.
• We are used "Image.asset('assets/images/boy.png')" here i have used boy.png so instead of boy.png you can use your own images like whatever images available inside your assets folder.
• We are used "_email" this is used for update the state of email on real time basis like inside email TextFormField we are used "onChanged" method that is basically used for updated the email value while filling value on real time. so with the help of "_email" we can validate inside login button visibility if user not type any single value in email TextField then the button is invisible otherwise its visible and use next validation steps.  

2. Create a email validation method ("validateEmail") inside "_LoginScreenState" class

String? validateEmail(String? email) {
if (email!.isEmpty) {
return 'Can\'t be empty';
}
if (email.length < 4) {
return 'Too short';
}
if (!RegExp(
r"^[a-zA-Z0-9.a-zA-Z0-9.!#$%&'*+-/=?^_`{|}~]+@[a-zA-Z0-9]+\.[a-zA-Z]+")
.hasMatch(email)) {
return 'Invalid Email Id';
}
// return null if the text is valid
return null;
}

-> In this method i have used all type of validation for email TextField you can add and modify multiple type of validation according to your project requirement.

3. Create a password validation method ("validatePassword") inside "_LoginScreenState" class

String? validatePassword(String? password) {
if (password!.isEmpty) {
return 'Can\'t be empty';
}
if (password.length < 6) {
return 'Password should not less than 6 digit';
}
// return null if the text is valid
return null;
}

-> In this method i have used all type of validation for password TextField you can add and modify multiple type of validation according to your project requirement.

4. Create a submit validation method ("_submit") inside "_LoginScreenState" class

void _submit() {
if (_formKey.currentState!.validate()) {
_formKey.currentState!.save();
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('Login Successfully')),
);
Navigator.push(
context,
MaterialPageRoute(builder: (context) => const HomePage()),
);
}
}

-> In this method i have used final validation for submit login form after successfully validation user navigate to another screen and you can also add your Api call here.

5. Now let's call all above methods inside Email, Password TextFields and Login button. 

class _LoginScreenState extends State<LoginScreen> {
bool passToggle = true;
String _email = '';
final GlobalKey<FormState> _formKey = GlobalKey<FormState>();

String? validateEmail(String? email) {
if (email!.isEmpty) {
return 'Can\'t be empty';
}
if (email.length < 4) {
return 'Too short';
}
if (!RegExp(
r"^[a-zA-Z0-9.a-zA-Z0-9.!#$%&'*+-/=?^_`{|}~]+@[a-zA-Z0-9]+\.[a-zA-Z]+")
.hasMatch(email)) {
return 'Invalid Email Id';
}
// return null if the text is valid
return null;
}

String? validatePassword(String? password) {
if (password!.isEmpty) {
return 'Can\'t be empty';
}
if (password.length < 6) {
return 'Password should not less than 6 digit';
}
// return null if the text is valid
return null;
}

void _submit() {
if (_formKey.currentState!.validate()) {
_formKey.currentState!.save();
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('Login Successfully')),
);
Navigator.push(
context,
MaterialPageRoute(builder: (context) => const HomePage()),
);
}
}

@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
title: const Text("Login Page"),
),
body: SingleChildScrollView(
padding: const EdgeInsets.only(top: 120.0),
child: Form(
key: _formKey,
child: Column(
children: <Widget>[
Center(
child: SizedBox(
width: 200,
height: 150,
child: Image.asset('assets/images/boy.png')),
),
Padding(
//padding: const EdgeInsets.only(left:15.0,right: 15.0,top:0,bottom: 0),
padding: const EdgeInsets.only(
top: 15.0, bottom: 5.0, left: 30.0, right: 30.0),
child: TextFormField(
keyboardType: TextInputType.emailAddress,
decoration: const InputDecoration(
border: OutlineInputBorder(),
labelText: 'Email',
prefixIcon: Icon(Icons.email),
hintText: 'Enter valid email id',
// use the getter variable defined above
),
validator: validateEmail,
autovalidateMode: AutovalidateMode.onUserInteraction,
onChanged: (text) => setState(() => _email = text),
),
),
Padding(
padding: const EdgeInsets.only(
left: 30.0, right: 30.0, top: 15, bottom: 10),
//padding: EdgeInsets.symmetric(horizontal: 15),
child: TextFormField(
obscureText: passToggle,
decoration: InputDecoration(
border: const OutlineInputBorder(),
labelText: 'Password',
hintText: 'Enter secure password',
prefixIcon: const Icon(Icons.lock),
suffixIcon: InkWell(
onTap: () {
setState(() {
passToggle = !passToggle;
});
},
child: Icon(
passToggle ? Icons.visibility : Icons.visibility_off),
),
),
validator: validatePassword,
autovalidateMode: AutovalidateMode.onUserInteraction,
),
),
Container(
alignment: Alignment.topRight,
padding: const EdgeInsets.only(right: 18.0),
child: TextButton(
onPressed: () {},
child: const Text(
'Forgot Password',
style: TextStyle(color: Colors.blue, fontSize: 15),
),
),
),
Container(
width: 350.0,
height: 70,
padding: const EdgeInsets.only(
left: 30.0, right: 30.0, top: 10.0, bottom: 10.0),
child: FilledButton(
onPressed: _email.isNotEmpty ? _submit : null,
child: const Text(
'Login',
style: TextStyle(color: Colors.white, fontSize: 22),
),
),
),
TextButton(
onPressed: () {},
child: const Text(
'New User? Create Account',
style: TextStyle(color: Colors.black, fontSize: 15),
),
)
],
),
),
),
);
}
}

• Inside Email "TextFormField" --> Inside "validator" method --> I have used "validateEmail" method.
• Inside Password "TextFormField" --> Inside "validator" method --> I have used "validatePassword" method.
• Inside Login "FilledButton" --> Inside "onPressed" method --> I have used "_submit" method.

Step 3 : Final Code of "LoginScreen.dart" File

import 'package:flutter/material.dart';
import 'package:my_test_app/HomePage.dart';

class LoginScreen extends StatefulWidget {
const LoginScreen({super.key});

@override
State<LoginScreen> createState() => _LoginScreenState();
}

class _LoginScreenState extends State<LoginScreen> {
bool passToggle = true;
String _email = '';
final GlobalKey<FormState> _formKey = GlobalKey<FormState>();

String? validateEmail(String? email) {
if (email!.isEmpty) {
return 'Can\'t be empty';
}
if (email.length < 4) {
return 'Too short';
}
if (!RegExp(
r"^[a-zA-Z0-9.a-zA-Z0-9.!#$%&'*+-/=?^_`{|}~]+@[a-zA-Z0-9]+\.[a-zA-Z]+")
.hasMatch(email)) {
return 'Invalid Email Id';
}
// return null if the text is valid
return null;
}

String? validatePassword(String? password) {
if (password!.isEmpty) {
return 'Can\'t be empty';
}
if (password.length < 6) {
return 'Password should not less than 6 digit';
}
// return null if the text is valid
return null;
}

void _submit() {
if (_formKey.currentState!.validate()) {
_formKey.currentState!.save();
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('Login Successfully')),
);
Navigator.push(
context,
MaterialPageRoute(builder: (context) => const HomePage()),
);
}
}

@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
title: const Text("Login Page"),
),
body: SingleChildScrollView(
padding: const EdgeInsets.only(top: 120.0),
child: Form(
key: _formKey,
child: Column(
children: <Widget>[
Center(
child: SizedBox(
width: 200,
height: 150,
child: Image.asset('assets/images/boy.png')),
),
Padding(
//padding: const EdgeInsets.only(left:15.0,right: 15.0,top:0,bottom: 0),
padding: const EdgeInsets.only(
top: 15.0, bottom: 5.0, left: 30.0, right: 30.0),
child: TextFormField(
keyboardType: TextInputType.emailAddress,
decoration: const InputDecoration(
border: OutlineInputBorder(),
labelText: 'Email',
prefixIcon: Icon(Icons.email),
hintText: 'Enter valid email id',
// use the getter variable defined above
),
validator: validateEmail,
autovalidateMode: AutovalidateMode.onUserInteraction,
onChanged: (text) => setState(() => _email = text),
),
),
Padding(
padding: const EdgeInsets.only(
left: 30.0, right: 30.0, top: 15, bottom: 10),
//padding: EdgeInsets.symmetric(horizontal: 15),
child: TextFormField(
obscureText: passToggle,
decoration: InputDecoration(
border: const OutlineInputBorder(),
labelText: 'Password',
hintText: 'Enter secure password',
prefixIcon: const Icon(Icons.lock),
suffixIcon: InkWell(
onTap: () {
setState(() {
passToggle = !passToggle;
});
},
child: Icon(
passToggle ? Icons.visibility : Icons.visibility_off),
),
),
validator: validatePassword,
autovalidateMode: AutovalidateMode.onUserInteraction,
),
),
Container(
alignment: Alignment.topRight,
padding: const EdgeInsets.only(right: 18.0),
child: TextButton(
onPressed: () {},
child: const Text(
'Forgot Password',
style: TextStyle(color: Colors.blue, fontSize: 15),
),
),
),
Container(
width: 350.0,
height: 70,
padding: const EdgeInsets.only(
left: 30.0, right: 30.0, top: 10.0, bottom: 10.0),
child: FilledButton(
onPressed: _email.isNotEmpty ? _submit : null,
child: const Text(
'Login',
style: TextStyle(color: Colors.white, fontSize: 22),
),
),
),
TextButton(
onPressed: () {},
child: const Text(
'New User? Create Account',
style: TextStyle(color: Colors.black, fontSize: 15),
),
)
],
),
),
),
);
}
}

Step 4 : Create "HomePage.dart" File in your Lib folder

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
const HomePage({super.key});

@override
State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Home Page'),
),
body: Center(
child: Container(
height: 60,
width: 350,
child: FilledButton(
onPressed: () {
Navigator.pop(context);
},
child: const Text(
'Welcome',
style: TextStyle(color: Colors.white, fontSize: 22),
),
),
),
),
);
}
}

-> This screen (HomePage.dart) call on "LoginScreen.dart" inside "_submit" method for navigate login to home screen.

Reference

here are the reference video of complete tutorial of how to create simple login page in flutter step by step in 2024 you can easily learn and use in your code.

Read More: Jetpack Compose Login Screen Example

Conclusion

In this blog i have shown you how to create login page in flutter step by step in 2024. you can easily use this code and modify according to your use.