Flutter Login Screen Design – Modern Login Screen UI

by | Sep 19, 2022 | Flutter, Flutter Login App, Flutter UI / UX, UI UX | 0 comments

In this flutter tutorial, we learn to design a modern flutter Login Page UI. Flutter Login Screen is the screen that has been used by almost every 2nd application. So, it has a very important role to Retain user or let them go. So, a beautiful login signup design is must to have a good appealing effect on our users.

In our previous tutorials, we already learned how to make the Splash Screen with animations and also how to create a Welcome Screen. So, In this tutorial, I will explain the Login Screen design.

You can watch recent playlist tutorials and all the related tutorials to this.

Watch Youtube tutorial

 

class LoginScreen extends StatelessWidget {
const LoginScreen({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
//Get the size in LoginHeaderWidget()
return SafeArea(
child: Scaffold(
body: SingleChildScrollView(
child: Container(
padding: const EdgeInsets.all(tDefaultSize),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
LoginHeaderWidget(),
LoginForm(),
LoginFooterWidget(),
],
),
),
),
),
);
}
}
class LoginHeaderWidget extends StatelessWidget {
const LoginHeaderWidget({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
final size = MediaQuery.of(context).size;

return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Image(
image: const AssetImage(tWelcomeScreenImage),
height: size.height * 0.2),
Text(tLoginTitle, style: Theme.of(context).textTheme.headline1),
Text(tLoginSubTitle, style: Theme.of(context).textTheme.bodyText1),
],
);
}
}
class LoginForm extends StatelessWidget {
const LoginForm({
Key? key,
}) : super(key: key);

@override
Widget build(BuildContext context) {
return Form(
child: Container(
padding: const EdgeInsets.symmetric(vertical: tFormHeight - 10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
TextFormField(
decoration: const InputDecoration(
prefixIcon: Icon(Icons.person_outline_outlined),
labelText: tEmail,
hintText: tEmail,
border: OutlineInputBorder()),
),
const SizedBox(height: tFormHeight - 20),
TextFormField(
decoration: const InputDecoration(
prefixIcon: Icon(Icons.fingerprint),
labelText: tPassword,
hintText: tPassword,
border: OutlineInputBorder(),
suffixIcon: IconButton(
onPressed: null,
icon: Icon(Icons.remove_red_eye_sharp),
),
),
),
const SizedBox(height: tFormHeight - 20),
Align(
alignment: Alignment.centerRight,
child: TextButton(
onPressed: () {}, child: const Text(tForgetPassword)),
),
SizedBox(
width: double.infinity,
child: ElevatedButton(
onPressed: () {},
child: Text(tLogin.toUpperCase()),
),
),
],
),
),
);
}
}
class LoginFooterWidget extends StatelessWidget {
const LoginFooterWidget({
Key? key,
}) : super(key: key);

@override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const Text("OR"),
const SizedBox(height: tFormHeight - 20),
SizedBox(
width: double.infinity,
child: OutlinedButton.icon(
icon: const Image(image: AssetImage(tGoogleLogoImage), width: 20.0),
onPressed: () {},
label: const Text(tSignInWithGoogle),
),
),
const SizedBox(height: tFormHeight - 20),
TextButton(
onPressed: () {},
child: Text.rich(
TextSpan(
text: tDontHaveAnAccount,
style: Theme.of(context).textTheme.bodyText1,
children: const [
TextSpan(text: tSignup, style: TextStyle(color: Colors.blue))
]),
),
),
],
);
}
}

CODING with T

🚀 Supercharge your Flutter skills! Subscribe to my YouTube channel now for mind-blowing coding insights, expert tips, and exclusive content. Don’t miss out!

COURSES

Flutter E Commerce App Modern and latest
Flutter Login App UI Source Code - Flutter Complete App - Flutter App Design - Flutter App 2023 - Complete Flutter App 2023
Learn flutter from scratch in 4 hours - Flutter Crash Course - Coding with T

Latest Tutorial

How to create a Custom Appbar in flutter. Custom Appbar Design. Flutter App Design
How to create a Custom Shape in Flutter. Flutter E Commerce app Design. Ecommerce app design Flutter. Flutter clippath tutorial
Bottom Navigation bar in Flutter. Flutter Material 3 bottom navigation bar. How to design background color of Flutter bottom navigation bar. Flutter ecommerce app design