0% found this document useful (0 votes)
15 views

Flutter

This document contains code for a login screen in Flutter. It imports necessary packages and defines a Login widget class. The widget builds a Scaffold with a form containing email, password, and login button fields. It uses a LoginController class to handle form submission and validation. The controller observes form state and displays error messages. A forgot password button is also implemented as a dialog to reset via email.

Uploaded by

imed
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
15 views

Flutter

This document contains code for a login screen in Flutter. It imports necessary packages and defines a Login widget class. The widget builds a Scaffold with a form containing email, password, and login button fields. It uses a LoginController class to handle form submission and validation. The controller observes form state and displays error messages. A forgot password button is also implemented as a dialog to reset via email.

Uploaded by

imed
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 5

import 'package:flutter/material.

dart';
import 'package:get/get.dart';
import 'package:google_fonts/google_fonts.dart';
import '../controller/loginController.dart';

class Login extends StatelessWidget {

Login({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
final LoginController loginController = Get.put(LoginController());
return Scaffold(
body: Obx(
() => SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.all(20),
child: Form(
key: loginController.formKey,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const SizedBox(height: 10),
Padding(
padding: const EdgeInsets.all(20),
child: Image.asset("images/signin.png"),
),
const SizedBox(height: 10),
if (loginController.errorMessage.isNotEmpty)
Text(loginController.errorMessage,
style: const TextStyle(color: Colors.red)),
buildEmailField(),
const SizedBox(height: 15),
buildPasswordField(),
buildForgotPassBtn(context),
buildLoginBtn(),
//buildSignupBtn(),
],
),
),
),
),
),
);
}

Widget buildEmailField() {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
const Text(
'Email Or Username',
style: TextStyle(
color: Colors.black,
fontSize: 16,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 10),
Container(
alignment: Alignment.centerLeft,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10),
boxShadow: const [
BoxShadow(
color: Colors.black26,
blurRadius: 6,
offset: Offset(0, 2),
),
],
),
height: 60,
child: TextFormField(
controller: loginController.usernameOrEmailController,
decoration: InputDecoration(
icon: const Icon(
Icons.person,
color: Colors.blue,
),
labelText: 'Username or email',
hintText: 'Enter Username/ Email',
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(16),
borderSide: const BorderSide(color: Colors.blue),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(16),
borderSide: const BorderSide(color: Colors.blue),
),
errorBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(16),
borderSide: const BorderSide(color: Colors.red),
),
focusedErrorBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(16),
borderSide: const BorderSide(color: Colors.red),
),
),
validator: (value) {
if (value!.isEmpty) {
return 'Please enter your username or email';
}
return null;
},
onSaved: (value) {
loginController.usernameOrEmailController.text =value!;
}
),
),
],
);
}

Widget buildPasswordField() {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
const Text(
'Password',
style: TextStyle(
color: Colors.white, fontSize: 16, fontWeight: FontWeight.bold),
),
const SizedBox(height: 10),
Container(
alignment: Alignment.centerLeft,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10),
boxShadow: const [
BoxShadow(
color: Colors.black26, blurRadius: 6, offset: Offset(0, 2))
]),
height: 60,
child: TextFormField(
controller: loginController.passwordController,
decoration: InputDecoration(
icon: const Icon(
Icons.vpn_key,
color: Colors.blue,
),
labelText: 'Password',
hintText: 'Enter Password',
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(16),
borderSide: const BorderSide(color: Colors.blue),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(16),
borderSide: const BorderSide(color: Colors.blue),
),
errorBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(16),
borderSide: const BorderSide(color: Colors.red),
),
focusedErrorBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(16),
borderSide: const BorderSide(color: Colors.red),
),
),
obscureText: true,
validator: (value) {
if (value!.isEmpty) {
return 'Please enter your password';
}
return null;
},
onSaved: (value) {
loginController.passwordController.text =value!;
},
),
),
],
);
}
void handleForgotPassword() {
showDialog(
context: Get.context!,
builder: (BuildContext context) {
return AlertDialog(
title: const Text('Reset Password'),
content: Container(
height: 120,
child: Column(
children: [
TextFormField(
controller: loginController.emailcontroller,
decoration: const InputDecoration(
labelText: 'Email',
hintText: 'Enter your email',
),
),
const SizedBox(height: 16),
ElevatedButton(
onPressed: () {
// Handle reset password
},
child: const Text('Reset Password'),
),
],
),
),
);
},
);
}
Widget buildForgotPassBtn(BuildContext context) {
return Container(
alignment: Alignment.centerRight,
child: Padding(
padding: const EdgeInsets.only(right: 0),
child: TextButton(
onPressed: () {
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: const Text('Reset Password'),
content: Container(
height: 120,
child: Column(
children: [
TextFormField(
decoration: const InputDecoration(
labelText: 'Email',
hintText: 'Enter your email',
),
onSaved: (value) {
// do something with the email value
},
),
const SizedBox(height: 16),
SizedBox(
width: double.infinity,
child: ElevatedButton(
onPressed: () {
Get.find<LoginController>().resetPassword();
},
child: const Text('Reset Password'),
),
),
],
),
),
);
},
);
},
child: const Text(
'Forgot Password?',
style: TextStyle(color: Colors.blue),
),
),
),
);
}

Widget buildLoginBtn() {
return Container(
padding: const EdgeInsets.symmetric(vertical: 25.0),
width: double.infinity,
child: ElevatedButton(
onPressed: (){
Get.find<LoginController>().submitForm();
},
style: ElevatedButton.styleFrom(
elevation: 5.0,
backgroundColor: Colors.white,
padding: const EdgeInsets.all(15.0),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30.0),
),
),
child: Text(
'LOGIN',
style: GoogleFonts.openSans(
color: Colors.blue,
letterSpacing: 1.5,
fontSize: 18.0,
fontWeight: FontWeight.bold,
),
),
),
);
}

You might also like