3. Develop Login Screen Application.
Step to Run
- Open your Flutter project in VS Code.
- Open
lib/main.dart. - Delete the existing code.
- Paste the program code given below.
- Save the file.
- Run the program using
flutter runcmd
PROGRAM:
import 'package:flutter/material.dart';
void main() {
runApp(const LoginApp());
}
class LoginApp extends StatelessWidget {
const LoginApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Lab Program 3',
debugShowCheckedModeBanner: false,
home: const LoginScreen(),
);
}
}
class LoginScreen extends StatefulWidget {
const LoginScreen({super.key});
@override
State<LoginScreen> createState() => _LoginScreenState();
}
class _LoginScreenState extends State<LoginScreen> {
final TextEditingController usernameController = TextEditingController();
final TextEditingController passwordController = TextEditingController();
String message = '';
void loginUser() {
String username = usernameController.text;
String password = passwordController.text;
setState(() {
if (username == 'admin' && password == '12345') {
message = 'Login Successful';
} else {
message = 'Invalid Username or Password';
}
});
}
@override
void dispose() {
usernameController.dispose();
passwordController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Program 3: Login Screen'),
centerTitle: true,
backgroundColor: Colors.blue,
foregroundColor: Colors.white,
),
body: Padding(
padding: const EdgeInsets.all(24),
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Icon(
Icons.lock,
size: 80,
color: Colors.blue,
),
const SizedBox(height: 20),
const Text(
'Login',
style: TextStyle(
fontSize: 32,
fontWeight: FontWeight.bold,
color: Colors.blue,
),
),
const SizedBox(height: 30),
TextField(
controller: usernameController,
decoration: const InputDecoration(
labelText: 'Username',
border: OutlineInputBorder(),
prefixIcon: Icon(Icons.person),
),
),
const SizedBox(height: 20),
TextField(
controller: passwordController,
obscureText: true,
decoration: const InputDecoration(
labelText: 'Password',
border: OutlineInputBorder(),
prefixIcon: Icon(Icons.lock),
),
),
const SizedBox(height: 25),
SizedBox(
width: double.infinity,
child: ElevatedButton(
onPressed: loginUser,
style: ElevatedButton.styleFrom(
backgroundColor: Colors.blue,
foregroundColor: Colors.white,
padding: const EdgeInsets.symmetric(vertical: 14),
),
child: const Text(
'Login',
style: TextStyle(fontSize: 18),
),
),
),
const SizedBox(height: 20),
Text(
message,
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: message == 'Login Successful'
? Colors.green
: Colors.red,
),
),
],
),
),
),
);
}
}OUTPUT:
Username: admin
Password: 12345
