0% found this document useful (0 votes)
19 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
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
19 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
We take content rights seriously. If you suspect this is your content, claim it here.
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