0% found this document useful (0 votes)
19 views3 pages

Login Code Flutter

The document is a Flutter application that implements a simple login UI. It includes a form with email and password fields, validation for input, and a login button that displays a success or error message based on the credentials entered. The UI features a gradient background and options for 'Remember me' and 'Forgot Password'.

Uploaded by

danishkhan821309
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
19 views3 pages

Login Code Flutter

The document is a Flutter application that implements a simple login UI. It includes a form with email and password fields, validation for input, and a login button that displays a success or error message based on the credentials entered. The UI features a gradient background and options for 'Remember me' and 'Forgot Password'.

Uploaded by

danishkhan821309
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

import 'package:flutter/material.

dart';

void main() => runApp(LoginUI());

class LoginUI extends StatelessWidget {


@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Login Page',
debugShowCheckedModeBanner: false,
home: LoginPage(),
);
}
}

class LoginPage extends StatefulWidget {


@override
_LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {


final _formKey = GlobalKey<FormState>();
final _emailController = TextEditingController();
final _passwordController = TextEditingController();
bool rememberMe = false;

void _login() {
if (_formKey.currentState!.validate()) {
String email = _emailController.text.trim();
String password = _passwordController.text.trim();

if (email == '[email protected]' && password == '123456') {


ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('Login Successful ')),
);
} else {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('Invalid email or password ')),
);
}
}
}

@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
decoration: const BoxDecoration(
gradient: LinearGradient(
colors: [Color(0xFF8e44ad), Color(0xFF3498db)],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
),
child: Center(
child: SingleChildScrollView(
child: Column(
children: [
CircleAvatar(
radius: 40,
backgroundColor: Colors.white.withOpacity(0.2),
child: const Icon(Icons.person, size: 50, color: Colors.white),
),
const SizedBox(height: 20),
Container(
margin: const EdgeInsets.symmetric(horizontal: 24),
padding: const EdgeInsets.all(24),
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.1),
borderRadius: BorderRadius.circular(20),
),
child: Form(
key: _formKey,
child: Column(
children: [
TextFormField(
controller: _emailController,
style: const TextStyle(color: Colors.white),
decoration: InputDecoration(
hintText: 'Email ID',
hintStyle: const TextStyle(color: Colors.white70),
prefixIcon: const Icon(Icons.email, color: Colors.white),
filled: true,
fillColor: Colors.white.withOpacity(0.1),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: BorderSide.none,
),
),
validator: (value) {
if (value == null || value.isEmpty || !value.contains('@')) {
return 'Enter a valid email';
}
return null;
},
),
const SizedBox(height: 16),
TextFormField(
controller: _passwordController,
obscureText: true,
style: const TextStyle(color: Colors.white),
decoration: InputDecoration(
hintText: 'Password',
hintStyle: const TextStyle(color: Colors.white70),
prefixIcon: const Icon(Icons.lock, color: Colors.white),
filled: true,
fillColor: Colors.white.withOpacity(0.1),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: BorderSide.none,
),
),
validator: (value) {
if (value == null || value.length < 6) {
return 'Password must be at least 6 characters';
}
return null;
},
),
const SizedBox(height: 16),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
Checkbox(
value: rememberMe,
onChanged: (value) {
setState(() {
rememberMe = value!;
});
},
activeColor: Colors.white,
checkColor: Colors.black,
),
const Text('Remember me', style: TextStyle(color: Colors.white)),
],
),
TextButton(
onPressed: () {},
child: const Text('Forgot Password?', style: TextStyle(color: Colors.white70)),
),
],
),
const SizedBox(height: 10),
SizedBox(
width: double.infinity,
child: ElevatedButton(
onPressed: _login,
style: ElevatedButton.styleFrom(
backgroundColor: Colors.white.withOpacity(0.3),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
),
padding: const EdgeInsets.symmetric(vertical: 16),
),
child: const Text(
'LOGIN',
style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
),
),
),
],
),
),
),
],
),
),
),
),
);
}
}

You might also like