This tutorial is a step-by-step guide to building a Flutter app that integrates login and registration and forgot password features.
.png "Login Sign Up and Forgot Screen With Validation | Flutter UI")
.png "Login Sign Up and Forgot Screen With Validation | Flutter UI")
Flutter Login Sign Up and Forgot password Design
In this tutorial, you will learn how to create a login and a register and forgot password ui for a flutter project.
Step 1: Add the Dependency to pubspec.yaml file as shown below:
dev_dependencies:
google_fonts: ^2.1.0
Step 2: Import the library
Now in your Dart code, you can use:
import 'package:google_fonts/google_fonts.dart';
Full Source Code
A main.dart file is a file in the Flutter framework that contains the logic for your app. It is the entry point for the application and is where you can define any variables you need to use in your code.
btn.dart
import 'package:flutter/material.dart';
class ButtonWidget extends StatelessWidget {
final String text;
final List backColor;
final List textColor;
final GestureTapCallback onPressed;
const ButtonWidget({
Key? key,
required this.text,
required this.backColor,
required this.textColor,
required this.onPressed,
}) : super(key: key);
@override
Widget build(BuildContext context) {
Shader textGradient = LinearGradient(
colors: [textColor[0], textColor[1]],
).createShader(
const Rect.fromLTWH(
0.0,
0.0,
200.0,
70.0,
),
);
var size = MediaQuery.of(context).size;
return SizedBox(
height: size.height * 0.07,
width: size.width * 0.9,
child: InkWell(
onTap: onPressed,
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15.0),
gradient: LinearGradient(
stops: const [0.4, 2],
begin: Alignment.centerRight,
end: Alignment.centerLeft,
colors: backColor,
),
),
child: Align(
child: Text(
text,
style: TextStyle(
foreground: Paint()..shader = textGradient,
fontWeight: FontWeight.bold,
fontSize: size.height * 0.02,
),
),
),
),
),
);
}
}
Ads
main.dart
import 'package:flutter/material.dart';
import 'package:login_blk/screen/auth.dart';
void main() async {
WidgetsFlutterBinding.ensureInitialized();
runApp(const App());
}
class App extends StatefulWidget {
const App({Key? key}) : super(key: key);
@override
_AppState createState() => _AppState();
}
class _AppState extends State {
@override
Widget build(BuildContext context) {
return const MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Login UI',
home: AuthPage(),
);
}
} auth.dart
This blog shares insight into the login page that's being built with Flutter. The login page will allow users to enter their username and password to authenticate before accessing the app.
This blog shares insight into the register page that's being built with Flutter. The register page will allow users to enter their first name,last name, email and password and confirm password to authenticate before accessing the app.
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:login_blk/btn_widget.dart';
import 'package:login_blk/screen/forgot_pass.dart';
class AuthPage extends StatefulWidget {
const AuthPage({Key? key}) : super(key: key);
@override
_AuthPageState createState() => _AuthPageState();
}
class _AuthPageState extends State {
bool checkedValue = false;
bool register = true;
List textfieldsStrings = [
"",
"",
"",
"",
"",
];
final _firstnamekey = GlobalKey();
final _lastNamekey = GlobalKey();
final _emailKey = GlobalKey();
final _passwordKey = GlobalKey();
final _confirmPasswordKey = GlobalKey();
@override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
var brightness = MediaQuery.of(context).platformBrightness;
bool isDarkMode = brightness == Brightness.dark;
return Scaffold(
body: Center(
child: Container(
height: size.height,
width: size.height,
decoration: BoxDecoration(
color: isDarkMode ? const Color(0xff151f2c) : Colors.white,
),
child: SafeArea(
child: Stack(
children: [
SingleChildScrollView(
child: Column(
children: [
Padding(
padding: EdgeInsets.only(top: size.height * 0.015),
child: Align(
child: register
? Text(
'Create an Account',
style: GoogleFonts.poppins(
color: isDarkMode
? Colors.white
: const Color(0xff1D1617),
fontSize: size.height * 0.025,
fontWeight: FontWeight.bold,
),
)
: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Login',
style: GoogleFonts.poppins(
color: isDarkMode
? Colors.white
: const Color(0xff1D1617),
fontSize: size.height * 0.05,
fontWeight: FontWeight.bold,
),
),
Text(
'Welcome Back',
style: GoogleFonts.poppins(
color: isDarkMode
? Colors.white
: const Color(0xff1D1617),
fontSize: size.height * 0.025,
fontWeight: FontWeight.normal,
),
),
],
),
),
),
Padding(
padding: EdgeInsets.only(top: size.height * 0.01),
),
SizedBox(
height: 60,
child: register
? buildTextField(
"First Name",
Icons.person_outlined,
false,
size,
(valuename) {
if (valuename.length <= 2) {
buildSnackError(
'Name is Require',
context,
size,
);
return '';
}
return null;
},
_firstnamekey,
0,
isDarkMode,
)
: Container(),
),
SizedBox(
height: 60,
child: register
? buildTextField(
"Last Name",
Icons.person_outlined,
false,
size,
(valuesurname) {
if (valuesurname.length <= 2) {
buildSnackError(
'Last name is Require',
context,
size,
);
return '';
}
return null;
},
_lastNamekey,
1,
isDarkMode,
)
: Container(),
),
Form(
child: SizedBox(
height: 60,
child: buildTextField(
"Email",
Icons.email_outlined,
false,
size,
(valuemail) {
if (valuemail.length < 5) {
buildSnackError(
'Email Id Require',
context,
size,
);
return '';
}
if (!RegExp(
r"^[a-zA-Z0-9.a-zA-Z0-9.!#$%&'*+-/=?^_`{|}~]+@[a-zA-Z0-9]+.[a-zA-Z]+")
.hasMatch(valuemail)) {
buildSnackError(
'Please Enter Valid Email',
context,
size,
);
return '';
}
return null;
},
_emailKey,
2,
isDarkMode,
),
),
),
Form(
child: SizedBox(
height: 60,
child: buildTextField(
"Passsword",
Icons.lock_outline,
true,
size,
(valuepassword) {
if (valuepassword.length <= 2) {
buildSnackError(
'Password is Require',
context,
size,
);
return '';
}
if (valuepassword.length < 6) {
buildSnackError(
'Password must be at least 6 characters',
context,
size,
);
return '';
}
return null;
},
_passwordKey,
3,
isDarkMode,
),
),
),
Form(
child: SizedBox(
height: 60,
child: register
? buildTextField(
"Confirm Passsword",
Icons.lock_outline,
true,
size,
(valuepassword) {
if (valuepassword != textfieldsStrings[3]) {
buildSnackError(
'Confirm password does not match the entered',
context,
size,
);
return '';
}
return null;
},
_confirmPasswordKey,
4,
isDarkMode,
)
: Container(),
),
),
Padding(
padding: EdgeInsets.symmetric(
horizontal: size.width * 0.015,
vertical: size.height * 0.025,
),
child: register
? CheckboxListTile(
title: RichText(
textAlign: TextAlign.left,
text: TextSpan(
children: [
TextSpan(
text:
"By creating an account, you agree to our ",
style: TextStyle(
color: const Color(0xffADA4A5),
fontSize: size.height * 0.015,
),
),
WidgetSpan(
child: InkWell(
onTap: () {
print('Conditions of Use');
},
child: Text(
"Conditions of Use",
style: TextStyle(
color: const Color(0xffADA4A5),
decoration:
TextDecoration.underline,
fontSize: size.height * 0.015,
),
),
),
),
TextSpan(
text: " and ",
style: TextStyle(
color: const Color(0xffADA4A5),
fontSize: size.height * 0.015,
),
),
WidgetSpan(
child: InkWell(
onTap: () {
print('Privacy Notice');
},
child: Text(
"Privacy Notice",
style: TextStyle(
color: const Color(0xffADA4A5),
decoration:
TextDecoration.underline,
fontSize: size.height * 0.015,
),
),
),
),
],
),
),
activeColor: const Color(0xff55F233),
value: checkedValue,
onChanged: (newValue) {
setState(() {
checkedValue = newValue!;
});
},
controlAffinity:
ListTileControlAffinity.leading,
)
: InkWell(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
const ForgotPasswordPage()),
);
},
child: Text(
"Forgot your password?",
style: TextStyle(
color: const Color(0xffADA4A5),
decoration: TextDecoration.underline,
fontSize: size.height * 0.02,
),
),
),
),
AnimatedPadding(
duration: const Duration(milliseconds: 500),
padding: register
? EdgeInsets.only(top: size.height * 0.025)
: EdgeInsets.only(top: size.height * 0.075),
child: ButtonWidget(
text: register ? "Register" : "Login",
backColor: isDarkMode
? [
Colors.black,
Colors.black,
]
: const [
Color(0xff000000),
Color(0xff000000),
],
textColor: const [
Colors.white,
Colors.white,
],
onPressed: () async {
if (register) {
if (_firstnamekey.currentState!.validate()) {
if (_lastNamekey.currentState!.validate()) {
if (_emailKey.currentState!.validate()) {
if (_passwordKey.currentState!.validate()) {
if (_confirmPasswordKey.currentState!
.validate()) {
if (checkedValue == false) {
buildSnackError(
'Accept our Privacy Policy and Term Of Use',
context,
size);
} else {
print('register');
}
}
}
}
}
}
} else {
if (_emailKey.currentState!.validate()) {
if (_passwordKey.currentState!.validate()) {
print('login');
}
}
}
},
),
),
AnimatedPadding(
duration: const Duration(milliseconds: 500),
padding: EdgeInsets.only(
top: register
? size.height * 0.025
: size.height * 0.15,
),
),
RichText(
textAlign: TextAlign.left,
text: TextSpan(
children: [
TextSpan(
text: register
? "Already have an account? "
: "Don’t have an account yet? ",
style: TextStyle(
color: isDarkMode
? Colors.white
: const Color(0xff1D1617),
fontSize: size.height * 0.02,
),
),
WidgetSpan(
child: InkWell(
onTap: () => setState(() {
if (register) {
register = false;
} else {
register = true;
}
}),
child: register
? Text(
"Login",
style: TextStyle(
foreground: Paint()
..shader = const LinearGradient(
colors: [
Colors.blue,
Colors.indigo,
],
).createShader(
const Rect.fromLTWH(
0.0,
0.0,
200.0,
70.0,
),
),
fontSize: size.height * 0.02,
fontWeight: FontWeight.bold),
)
: Text(
"Register",
style: TextStyle(
foreground: Paint()
..shader = const LinearGradient(
colors: [
Colors.blue,
Colors.indigo,
],
).createShader(
const Rect.fromLTWH(
0.0, 0.0, 200.0, 70.0),
),
fontSize: size.height * 0.02,
fontWeight: FontWeight.bold),
),
),
),
],
),
),
],
),
),
],
),
),
),
),
);
}
bool pwVisible = false;
Widget buildTextField(
String hintText,
IconData icon,
bool password,
size,
FormFieldValidator validator,
Key key,
int stringToEdit,
bool isDarkMode,
) {
return Padding(
padding: EdgeInsets.only(top: size.height * 0.025),
child: Container(
width: size.width * 0.9,
height: size.height * 0.05,
decoration: BoxDecoration(
color: isDarkMode ? Colors.black : const Color(0xffF7F8F8),
borderRadius: const BorderRadius.all(Radius.circular(15)),
),
child: Form(
key: key,
child: TextFormField(
style: TextStyle(
color: isDarkMode ? const Color(0xffADA4A5) : Colors.black),
onChanged: (value) {
setState(() {
textfieldsStrings[stringToEdit] = value;
});
},
validator: validator,
textInputAction: TextInputAction.next,
obscureText: password ? !pwVisible : false,
decoration: InputDecoration(
errorStyle: const TextStyle(height: 0),
hintStyle: const TextStyle(
color: Color(0xffADA4A5),
),
border: InputBorder.none,
contentPadding: EdgeInsets.only(
top: size.height * 0.012,
),
hintText: hintText,
prefixIcon: Padding(
padding: EdgeInsets.only(
top: size.height * 0.005,
),
child: Icon(
icon,
color: const Color(0xff7B6F72),
),
),
suffixIcon: password
? Padding(
padding: EdgeInsets.only(
top: size.height * 0.005,
),
child: InkWell(
onTap: () {
setState(() {
pwVisible = !pwVisible;
});
},
child: pwVisible
? const Icon(
Icons.visibility_off_outlined,
color: Color(0xff7B6F72),
)
: const Icon(
Icons.visibility_outlined,
color: Color(0xff7B6F72),
),
),
)
: null,
),
),
),
),
);
}
ScaffoldFeatureController buildSnackError(
String error, context, size) {
return ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topRight: Radius.circular(16), topLeft: Radius.circular(16)),
),
duration: const Duration(seconds: 2),
backgroundColor: Colors.black,
content: SizedBox(
height: size.height * 0.03,
child: Text(
error,
style: TextStyle(fontSize: 15, fontWeight: FontWeight.bold),
),
),
),
);
}
}
forgot_pass.dart
import 'package:login_blk/btn_widget.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
class ForgotPasswordPage extends StatefulWidget {
const ForgotPasswordPage({Key? key}) : super(key: key);
@override
_ForgotPasswordPageState createState() => _ForgotPasswordPageState();
}
class _ForgotPasswordPageState extends State {
String email = '';
final _emailKey = GlobalKey();
@override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
var brightness = MediaQuery.of(context).platformBrightness;
bool isDarkMode = brightness == Brightness.dark;
return Scaffold(
body: Center(
child: Container(
height: size.height,
width: size.height,
decoration: BoxDecoration(
color: isDarkMode ? const Color(0xff151f2c) : Colors.white,
),
child: SafeArea(
child: Stack(
children: [
SingleChildScrollView(
child: Column(
children: [
Padding(
padding: EdgeInsets.symmetric(
horizontal: size.width * 0.030,vertical: 2),
child: Row(
children: [
InkWell(
onTap: () =>
Navigator.pop(context), //go back to authPage
child: Icon(
Icons.arrow_back_ios,
color: isDarkMode ? Colors.white : Colors.black,
size: size.height * 0.04,
),
),
Padding(
padding: EdgeInsets.symmetric(
horizontal: size.width * 0.015,
),
),
],
),
),
Padding(
padding: EdgeInsets.only(
top: size.height * 0.05,
left: size.width * 0.055,
),
child: Align(
alignment: Alignment.centerLeft,
child: Text(
'Forgot password',
style: GoogleFonts.poppins(
color: isDarkMode
? Colors.white
: const Color(0xff1D1617),
fontSize: size.height * 0.035,
fontWeight: FontWeight.bold,
),
),
),
),
Padding(
padding: EdgeInsets.symmetric(
horizontal: size.width * 0.055),
child: Align(
child: Text(
"Forgot your password?\nProvide your email and we will send you a link to reset your password.",
style: GoogleFonts.poppins(
color:
isDarkMode ? Colors.white54 : Colors.black54,
fontSize: size.height * 0.02,
),
),
),
),
Form(
child: buildTextField(
"Email",
Icons.email_outlined,
false,
size,
(valuemail) {
if (valuemail.length < 5) {
buildSnackError(
'Email Id Require',
context,
size,
);
return '';
}
if (!RegExp(
r"^[a-zA-Z0-9.a-zA-Z0-9.!#$%&'*+-/=?^_`{|}~]+@[a-zA-Z0-9]+.[a-zA-Z]+")
.hasMatch(valuemail)) {
buildSnackError(
'Please Enter Valid Email',
context,
size,
);
return '';
}
return null;
},
isDarkMode,
),
),
Padding(
padding: EdgeInsets.only(top: size.height * 0.03),
child: ButtonWidget(
text: 'Reset',
backColor: isDarkMode
? [
Colors.black,
Colors.black,
]
: const [Color(0xff000000), Color(0xff000000),],
textColor: const [
Colors.white,
Colors.white,
],
onPressed: () async {
if (_emailKey.currentState!.validate()) {
print('$email forgot password');
}
}),
),
],
),
),
],
),
),
),
),
);
}
bool pwVisible = false;
Widget buildTextField(
String hintText,
IconData icon,
bool password,
size,
FormFieldValidator validator,
bool isDarkMode,
) {
return Padding(
padding: EdgeInsets.only(top: size.height * 0.025),
child: Container(
width: size.width * 0.9,
height: size.height * 0.06,
decoration: BoxDecoration(
color: isDarkMode ? Colors.black : const Color(0xffF7F8F8),
borderRadius: const BorderRadius.all(Radius.circular(10)),
),
child: Form(
key: _emailKey,
child: TextFormField(
style: TextStyle(
color: isDarkMode ? const Color(0xffADA4A5) : Colors.black),
onChanged: (value) {
setState(() {
email = value;
});
},
validator: validator,
textInputAction: TextInputAction.next,
obscureText: password ? !pwVisible : false,
decoration: InputDecoration(
errorStyle: const TextStyle(height: 0),
hintStyle: const TextStyle(
color: Color(0xffADA4A5),
),
border: InputBorder.none,
contentPadding: EdgeInsets.only(
top: size.height * 0.02,
),
hintText: hintText,
prefixIcon: Padding(
padding: EdgeInsets.only(
top: size.height * 0.005,
),
child: Icon(
icon,
color: const Color(0xff7B6F72),
),
),
suffixIcon: password
? Padding(
padding: EdgeInsets.only(
top: size.height * 0.005,
),
child: InkWell(
onTap: () {
setState(() {
pwVisible = !pwVisible;
});
},
child: pwVisible
? const Icon(
Icons.visibility_off_outlined,
color: Color(0xff7B6F72),
)
: const Icon(
Icons.visibility_outlined,
color: Color(0xff7B6F72),
),
),
)
: null,
),
),
),
),
);
}
ScaffoldFeatureController buildSnackError(
String error, context, size) {
return ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.only(
topRight: Radius.circular(16),
topLeft: Radius.circular(16)
),),
duration: const Duration(seconds: 2),
backgroundColor: Colors.black,
content: SizedBox(
height: size.height * 0.03,
child: Text(error,style: TextStyle(fontSize: 15,fontWeight: FontWeight.bold),),
),
),
);
}
} OUTPUT
Posts
.png&description=Login Sign Up and Forgot Screen With Validation | Flutter UI){kind=link}
0 Comments
Please Do Not Comments Any Span Or Span link..