How to Reset Password Screen in Flutter – UI Code

Basics, Flutter Login App, Flutter UI / UX, UI UX

In this flutter tutorial, we will learn how to design a forgot password screen in our FLUTTER LOGIN APP. In this tutorial, we will learn to reset the password screen in flutter using two methods. Mail and Phone No authentication.

We will also learn how to create Model Bottom Sheet showmodalbottomsheet() in flutter. There will be a model bottom sheet popup when user click on Forgot Password button in Login Signup screen.

In that model sheet we will create two modern button designs with Gesture Detector. After that user will be redirected to enter Email or Phone no for Firebase authentication.

In our previous tutorials, we already learned how to design Flutter Login, Signup, and Welcome Screen UI. So, In this tutorial, I will explain the Forget Password Screens UI.

You can watch recent playlist tutorials and all the related tutorials to this Tutorial.

Watch Youtube tutorial

 

class ForgetPasswordScreen {
static Future<dynamic> buildShowModalBottomSheet(BuildContext context) {
return showModalBottomSheet(
context: context,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20.0)),
builder: (context) => Container(
padding: const EdgeInsets.all(tDefaultSize),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(tForgetPasswordTitle,
style: Theme.of(context).textTheme.headline2),
Text(tForgetPasswordSubTitle,
style: Theme.of(context).textTheme.bodyText2),
const SizedBox(height: 30.0),
ForgetPasswordBtnWidget(
onTap: () {
Navigator.pop(context);
Get.to(() => const ForgetPasswordMailScreen());
},
title: tEmail,
subTitle: tResetViaEMail,
btnIcon: Icons.mail_outline_rounded,
),
const SizedBox(height: 20.0),
ForgetPasswordBtnWidget(
onTap: () {},
title: tPhoneNo,
subTitle: tResetViaPhone,
btnIcon: Icons.mobile_friendly_rounded,
),
],
),
),
);
}
}
import 'package:flutter/material.dart';

class ForgetPasswordBtnWidget extends StatelessWidget {
const ForgetPasswordBtnWidget({
required this.btnIcon,
required this.title,
required this.subTitle,
required this.onTap,
Key? key,
}) : super(key: key);

final IconData btnIcon;
final String title, subTitle;
final VoidCallback onTap;

@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: onTap,
child: Container(
padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 10.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
color: Colors.grey.shade200,
),
child: Row(
children: [
Icon(btnIcon, size: 60.0),
const SizedBox(width: 10.0),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(title, style: Theme.of(context).textTheme.headline6),
Text(subTitle, style: Theme.of(context).textTheme.bodyText2),
],
)
],
),
),
);
}
}
class ForgetPasswordMailScreen extends StatelessWidget {
const ForgetPasswordMailScreen({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: SingleChildScrollView(
child: Container(
padding: const EdgeInsets.all(tDefaultSize),
child: Column(
children: [
const SizedBox(height: tDefaultSize * 4),
FormHeaderWidget(
image: tForgetPasswordImage,
title: tForgetPassword.toUpperCase(),
subTitle: tForgetPasswordSubTitle,
crossAxisAlignment: CrossAxisAlignment.center,
heightBetween: 30.0,
textAlign: TextAlign.center,
),
const SizedBox(height: tFormHeight),
Form(
child: Column(
children: [
TextFormField(
decoration: const InputDecoration(
label: Text(tEmail),
hintText: tEmail,
prefixIcon: Icon(Icons.mail_outline_rounded)),
),
const SizedBox(height: 20.0),
SizedBox(
width: double.infinity,
child: ElevatedButton(
onPressed: () {
Get.to(() => const OTPScreen());
},
child: const Text(tNext))),
],
),
),
],
),
),
),
),
);
}
}

Let's Connect

Videos are always a better source for in-depth knowledge. So, connect with me at YouTube.

Download Project

Flutter Login App UI Source Code- How to Create a complete Flutter app - Flutter education app - Flutter app UI Design - Flutter Course - Flutter Complete App 2022
Dashboard Source COde - Dashboard design in flutter - flutter dashoard - flutter app design 2022 - Flutter UI - Flutter homepage

Latest Courses

Flutter Login App UI Source Code- How to Create a complete Flutter app - Flutter education app - Flutter app UI Design - Flutter Course - Flutter Complete App 2022
Learn flutter from scratch in 4 hours - Flutter Crash Course - Coding with T

Latest Tutorials

Flutter Profile page UI Design - Flutter app design 2023 - Profile Screen Flutter UI - Flutter 2023
Flutter Firebase phone authentication - Firebase Phone auth tutorial in flutter - Flutter Firebase phone number authentication 2022
Firebase Authentication in flutter - Flutter firebase authentication 2022 - firebase auth tutorial 2022 - firebase flutter auth
How to setup firebase in flutter 2022 - Flutter firebase setup
Dashboard Source COde - Dashboard design in flutter - flutter dashoard - flutter app design 2022 - Flutter UI - Flutter homepage

Join Our Mailing List

Join our mailing list to receive the latest, Free Courses, Video Tutorials, free codes and updates regarding Tutorials and services. You will also start getting coupons on the related services.

You have Successfully Subscribed!

FLUTTER APP

Learn Flutter App development from scratch. Create LOGIN APP that can be used with any application which requires Login Sign Up functionality.

You can watch it on YouTube or read and get source code from Blog Post.

You have Successfully Subscribed!