Introduction
Hey there, fellow Flutter enthusiast! Ready to dive into the world of login screens? Creating a login screen is often one of the first tasks we tackle when building a new app. It’s like the front door to your digital home, so let’s make it look good and work smoothly!
Steps to create a login screen
. Set up your Flutter project
First things first, let’s get our Flutter project up and running. If you haven’t already, open up your terminal and create a new Flutter project:
flutter create (project name of your choice)
cd login_screen_appCheck out this video of creating a new flutter viedo using command prompt
In order to run
opening the project
open the Andriod studio.
Go to option open project
Click on the project you have just created.
Design the UI
import 'package:flutter/material.dart';
void main() {
runApp(LoginApp());
}
class LoginApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: LoginScreen(),
);
}
}
class LoginScreen extends StatefulWidget {
@override
_LoginScreenState createState() => _LoginScreenState();
}
class _LoginScreenState extends State<LoginScreen> {
final _formKey = GlobalKey<FormState>();
final TextEditingController _emailController = TextEditingController();
final TextEditingController _passwordController = TextEditingController();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Login Screen'),
),
body: Padding(
padding: EdgeInsets.all(16.0),
child: Form(
key: _formKey,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
TextFormField(
controller: _emailController,
decoration: InputDecoration(
labelText: 'Email',
border: OutlineInputBorder(),
prefixIcon: Icon(Icons.email),
),Form Validation
keyboardType: TextInputType.emailAddress,
validator: (value) {
if (value == null || value.isEmpty) {
return 'Please enter your email';
}
if (!RegExp(r'\S+@\S+\.\S+').hasMatch(value)) {
return 'Please enter a valid email';
}
return null;
},
),
SizedBox(height: 16.0),
TextFormField(
controller: _passwordController,
decoration: InputDecoration(
labelText: 'Password',
border: OutlineInputBorder(),
prefixIcon: Icon(Icons.lock),
),
obscureText: true,
validator: (value) {
if (value == null || value.isEmpty) {
return 'Please enter your password';
}
if (value.length < 6) {
return 'Password must be at least 6 characters long';
}
return null;
},
),
SizedBox(height: 24.0),
ElevatedButton(
onPressed: () {
if (_formKey.currentState!.validate()) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('Processing Login')),
);
}
},
child: Text('Login'),
),
],
),
),
),
);
}
}
