How to Reset Password Screen in Flutter – UI Code

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

CODING with T

🚀 Supercharge your Flutter skills! Subscribe to my YouTube channel now for mind-blowing coding insights, expert tips, and exclusive content. Don’t miss out!

23 - Product Detail Screen, How to create Products Details Screen in Flutter. Flutter eCommerce app UI Design

Source code

COURSES

Flutter E Commerce App Modern and latest
Flutter Login App UI Source Code - Flutter Complete App - Flutter App Design - Flutter App 2023 - Complete Flutter App 2023
Learn flutter from scratch in 4 hours - Flutter Crash Course - Coding with T

Learn Flutter

1.2 # How to install flutter on android studio 2022 - Flutter Basic Crash Course
2.2 - Add Image in Flutter - Assets Network- Flutter Basic Crash Course 2022

flutter Design

How to create a Custom Shape in Flutter. Flutter E Commerce app Design. Ecommerce app design Flutter. Flutter clippath tutorial
How to create a Custom Appbar in flutter. Custom Appbar Design. Flutter App Design
16 - Product Card and Grid Layout, How to create a Grid View in Flutter. How to add Products in GridView Layout. Flutter eCommerce app UI Design
Bottom Navigation bar in Flutter. Flutter Material 3 bottom navigation bar. How to design background color of Flutter bottom navigation bar. Flutter ecommerce app design
23 - Product Detail Screen, How to create Products Details Screen in Flutter. Flutter eCommerce app UI Design

Flutter Backend

33 - How to Setup Firebase - Firebase Basics - Flutter Firebase - Flutter ecommerce app with firebase as backend
38 - How to Sign-in with Google in flutter Firebase, Firebase Basics, Flutter Firebase, Flutter ecommerce app with firebase as backend
40 - Flutter Firebase CRUD,  Firebase Basics, Flutter Firebase, Flutter ecommerce app with firebase as backend