Login and Signup screens in Flutter are important for an online responsive app. Today we will create an app with a login screen, Signup screen, and password reset screen in Flutter.
How to create Login and Signup screens in Flutter?
We will create our app with the below steps
Also Read- How to create a Weather app in Flutter
Step 1:
First, we will create our app and add the Lottie package to pubspec.yaml file. Then download the Lottie animations and add them to the assets/animations directory. Then add the assets directory to pubspec.yaml file. Or you can clone the project from my Github profile. Login Screen and Signup Screen in Flutter Source code.
Step 2:
Now we will write the below code to our main.dart file.
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:loginapp/screens/login_screen.dart';
void main() {
runApp(const LoginApp());
}
class LoginApp extends StatelessWidget {
const LoginApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Login App',
debugShowCheckedModeBanner: false,
theme: ThemeData(
appBarTheme: const AppBarTheme(
systemOverlayStyle: SystemUiOverlayStyle(
statusBarColor: Colors.transparent,
statusBarIconBrightness: Brightness.dark,
),
backgroundColor: Colors.transparent,
shadowColor: Colors.transparent,
iconTheme: IconThemeData(
color: Color(0xff7174d0),
),
),
),
home: const LoginScreen(),
);
}
}
Step : 3
Now, we will create a folder named screens in the lib directory. And then create the following files with the provided code.
login_screen.dart
import 'package:flutter/material.dart';
import 'package:loginapp/screens/forgot_password_screen.dart';
import 'package:loginapp/screens/signup_screen.dart';
import 'package:lottie/lottie.dart';
class LoginScreen extends StatelessWidget {
const LoginScreen({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: SafeArea(
child: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.only(left: 15, right: 15, bottom: 15),
child: Column(
children: <Widget>[
LottieBuilder.asset("assets/animations/user-profile.json"),
Container(
alignment: Alignment.topLeft,
child: const Text(
"Login",
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.w600,
color: Color(0xff7174d0),
),
),
),
const TextField(
keyboardType: TextInputType.emailAddress,
decoration: InputDecoration(
labelText: "Email Id",
icon: Icon(
Icons.email,
color: Color(0xff999dec),
),
labelStyle: TextStyle(
color: Color(0xff999dec),
),
),
),
const TextField(
obscureText: true,
keyboardType: TextInputType.visiblePassword,
decoration: InputDecoration(
labelText: "Password",
icon: Icon(
Icons.lock,
color: Color(0xff999dec),
),
labelStyle: TextStyle(
color: Color(0xff999dec),
),
),
),
Container(
alignment: Alignment.topRight,
child: TextButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const ForgotPasswordScreen(),
),
);
},
child: const Text(
"Forgot Password?",
style: TextStyle(
color: Color(0xFF6E50F5),
),
),
),
),
MaterialButton(
minWidth: MediaQuery.of(context).size.width,
onPressed: () {},
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
color: const Color(0xff8572e8),
textColor: Colors.white,
child: const Text(
"Login",
),
),
Container(
alignment: Alignment.center,
child: TextButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const SignupScreen(),
),
);
},
child: const Text(
"Reginster",
style: TextStyle(
color: Color(0xFF6E50F5),
),
),
),
),
],
),
),
),
),
);
}
}
signup_screen.dart
import 'package:flutter/material.dart';
import 'package:loginapp/screens/login_screen.dart';
import 'package:lottie/lottie.dart';
class SignupScreen extends StatelessWidget {
const SignupScreen({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: SafeArea(
child: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.only(left: 15, right: 15, bottom: 15),
child: Column(
children: <Widget>[
LottieBuilder.asset(
"assets/animations/make-the-deal.json",
height: 200,
width: 200,
),
Container(
alignment: Alignment.topLeft,
child: const Text(
"Signup",
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.w600,
color: Color(0xff7174d0),
),
),
),
const TextField(
keyboardType: TextInputType.emailAddress,
decoration: InputDecoration(
labelText: "Email Id",
icon: Icon(
Icons.email,
color: Color(0xff999dec),
),
labelStyle: TextStyle(
color: Color(0xff999dec),
),
),
),
const TextField(
keyboardType: TextInputType.name,
decoration: InputDecoration(
labelText: "Username",
icon: Icon(
Icons.alternate_email_rounded,
color: Color(0xff999dec),
),
labelStyle: TextStyle(
color: Color(0xff999dec),
),
),
),
const TextField(
obscureText: true,
keyboardType: TextInputType.number,
decoration: InputDecoration(
labelText: "Mobile Number",
icon: Icon(
Icons.phone,
color: Color(0xff999dec),
),
labelStyle: TextStyle(
color: Color(0xff999dec),
),
),
),
const TextField(
obscureText: true,
keyboardType: TextInputType.visiblePassword,
decoration: InputDecoration(
labelText: "Password",
icon: Icon(
Icons.lock,
color: Color(0xff999dec),
),
labelStyle: TextStyle(
color: Color(0xff999dec),
),
),
),
Container(
alignment: Alignment.topLeft,
margin: const EdgeInsets.all(10),
child: RichText(
text: const TextSpan(
children: [
TextSpan(
text: "By signing up you aggery to our\n",
style: TextStyle(
color: Color(0xFF5C5C5C),
),
),
TextSpan(
text: "Terms & Conditions",
style: TextStyle(
color: Color(0xFF461EF7),
),
),
],
),
),
),
MaterialButton(
minWidth: MediaQuery.of(context).size.width,
onPressed: () {},
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
color: const Color(0xff8572e8),
textColor: Colors.white,
child: const Text(
"Signup",
),
),
Container(
alignment: Alignment.center,
child: TextButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const LoginScreen(),
),
);
},
child: const Text(
"Login",
style: TextStyle(
color: Color(0xFF6E50F5),
),
),
),
),
],
),
),
),
),
);
}
}forgot_password_screen.dart
import 'package:flutter/material.dart';
import 'package:loginapp/screens/otp_screen.dart';
import 'package:lottie/lottie.dart';
class ForgotPasswordScreen extends StatelessWidget {
const ForgotPasswordScreen({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: SafeArea(
child: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.only(left: 15, right: 15, bottom: 15),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
LottieBuilder.asset("assets/animations/forgot-password.json"),
const SizedBox(
height: 20,
),
Container(
alignment: Alignment.topLeft,
child: const Text(
"Forgot Password?",
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.w600,
color: Color(0xff7174d0),
),
),
),
Container(
alignment: Alignment.topLeft,
child: TextButton(
onPressed: () {},
child: const Text(
"Don't worry! It happens. Please enter the mobile number linked to your account",
style: TextStyle(
color: Color(0xFF5C5C5C),
),
),
),
),
const TextField(
keyboardType: TextInputType.number,
decoration: InputDecoration(
labelText: "Mobile Number",
icon: Icon(
Icons.phone,
color: Color(0xff999dec),
),
labelStyle: TextStyle(
color: Color(0xff999dec),
),
),
),
const SizedBox(
height: 20,
),
MaterialButton(
minWidth: MediaQuery.of(context).size.width,
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const OtpScreen(),
),
);
},
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
color: const Color(0xff8572e8),
textColor: Colors.white,
child: const Text(
"Get OTP",
),
),
],
),
),
),
),
);
}
}otp_screen.dart
import 'package:flutter/material.dart';
import 'package:loginapp/screens/reset_password_screen.dart';
import 'package:lottie/lottie.dart';
class OtpScreen extends StatelessWidget {
const OtpScreen({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: SafeArea(
child: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.only(left: 15, right: 15, bottom: 15),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
LottieBuilder.asset("assets/animations/enter-otp.json"),
const SizedBox(
height: 20,
),
Container(
alignment: Alignment.topLeft,
child: const Text(
"Enter OTP",
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.w600,
color: Color(0xff7174d0),
),
),
),
Container(
alignment: Alignment.topLeft,
child: TextButton(
onPressed: () {},
child: const Text(
"A 4 digit code has been sent to your mobile number",
style: TextStyle(
color: Color(0xFF5C5C5C),
),
),
),
),
const TextField(
keyboardType: TextInputType.number,
decoration: InputDecoration(
labelText: "OTP",
icon: Icon(
Icons.password,
color: Color(0xff999dec),
),
labelStyle: TextStyle(
color: Color(0xff999dec),
),
),
),
const SizedBox(
height: 20,
),
MaterialButton(
minWidth: MediaQuery.of(context).size.width,
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const ResetPasswordScreen(),
),
);
},
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
color: const Color(0xff8572e8),
textColor: Colors.white,
child: const Text(
"Change Password",
),
),
],
),
),
),
),
);
}
}reset_password_screen.dart
import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';
class ResetPasswordScreen extends StatelessWidget {
const ResetPasswordScreen({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: SafeArea(
child: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.only(left: 15, right: 15, bottom: 15),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
LottieBuilder.asset("assets/animations/change-passwords.json"),
const SizedBox(
height: 20,
),
Container(
alignment: Alignment.topLeft,
child: const Text(
"Reset Password",
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.w600,
color: Color(0xff7174d0),
),
),
),
const TextField(
obscureText: true,
keyboardType: TextInputType.visiblePassword,
decoration: InputDecoration(
labelText: "New Password",
icon: Icon(
Icons.lock,
color: Color(0xff999dec),
),
labelStyle: TextStyle(
color: Color(0xff999dec),
),
),
),
const TextField(
obscureText: true,
keyboardType: TextInputType.visiblePassword,
decoration: InputDecoration(
labelText: "Confirm Password",
icon: Icon(
Icons.lock,
color: Color(0xff999dec),
),
labelStyle: TextStyle(
color: Color(0xff999dec),
),
),
),
const SizedBox(
height: 20,
),
MaterialButton(
minWidth: MediaQuery.of(context).size.width,
onPressed: () {
Navigator.of(context).popUntil((route) => route.isFirst);
},
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
color: const Color(0xff8572e8),
textColor: Colors.white,
child: const Text(
"Reset Password",
),
),
],
),
),
),
),
);
}
}And, You have it.
If you find this post helpful then please like and share.
