Forgot Password Screen Simple UI

 import "package:flutter/material.dart";


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

@override
State<ForgotPassword> createState() {
return ForgotPasswordState();
}
}

class ForgotPasswordState extends State<ForgotPassword> {
TextEditingController phoneController = TextEditingController();

@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
return FocusManager.instance.primaryFocus?.unfocus();
},
child: Scaffold(
extendBodyBehindAppBar: true,
appBar: AppBar(
leading: IconButton(
onPressed: () {
Navigator.pop(context);
},
icon: const Icon(Icons.arrow_back, color: Colors.white),
),
backgroundColor: Colors.transparent,
),
body: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Colors.blue.shade700,
Colors.blue.shade100,
Colors.blue.shade50,
],
begin: const FractionalOffset(1.0, 0.0),
end: const FractionalOffset(0.0, 1.0),
),
),
child: Center(
child: Container(
width: 360.0,
height: 480.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12.0),
color: Colors.white,
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Text(
"Forgot Password",
style:
TextStyle(fontWeight: FontWeight.bold, fontSize: 20.0),
),
const SizedBox(height: 50.0),
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(11.0),
color: Colors.grey.shade300,
),
width: 330.0,
child: TextFormField(
controller: phoneController,
decoration: const InputDecoration(
border: InputBorder.none,
hintText: "Password",
hintStyle: TextStyle(fontWeight: FontWeight.w300),
prefixIcon: Icon(Icons.password),
),
),
),
const SizedBox(height: 50.0),
ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
backgroundColor: Colors.blue,
fixedSize: const Size(150.0, 50.0),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(11.0),
),
),
child: const Text(
"Save",
style: TextStyle(color: Colors.white),
),
),
],
),
),
),
),
),
);
}
}


Comments

Popular posts from this blog

Second GET API Calling with Bloc simple Example in Flutter

Stack Container Scrollable Card widget UI with Custom Widget

Pagination with Bloc Pattern in Flutter