Tue, May 9, 2023
Read in 2 minutes
In this post I will show you how to create a beautiful Login Screen UI in Flutter
First, copy paste the following code inside main.dart file:
import 'package:flutter/material.dart';
import 'login_screen.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
debugShowCheckedModeBanner: false,
home: LoginScreen(),
);
}
}
Next, create login_screen.dart file and copy and paste the following code:
import 'package:flutter/material.dart';
class LoginScreen extends StatelessWidget {
const LoginScreen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Padding(
padding: const EdgeInsets.all(30.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// title
const Text(
"Welcome back!",
style: TextStyle(
fontSize: 26,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 10),
// subtitle
const Text(
"Start managing your finance faster and better",
style: TextStyle(
fontSize: 13,
color: Color(0XFF9BA0AB),
fontWeight: FontWeight.normal,
),
),
const SizedBox(height: 35),
// email field
TextField(
decoration: InputDecoration(
filled: true,
fillColor: const Color(0xFFEAEEF5),
// contentPadding: ,
prefixIcon: const Icon(Icons.email_outlined),
hintText: "you@gmail.com",
hintStyle: const TextStyle(
color: Color(0XFF9BA0AB),
),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
borderSide: BorderSide.none,
),
),
),
const SizedBox(height: 10),
// password field
TextField(
obscureText: true,
decoration: InputDecoration(
filled: true,
fillColor: const Color(0xFFEAEEF5),
prefixIcon: const Icon(Icons.lock_outline),
hintText: "at least 8 characters",
hintStyle: const TextStyle(
color: Color(0XFF9BA0AB),
),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
borderSide: BorderSide.none,
),
),
),
// forgot password
Align(
alignment: Alignment.centerRight,
child: TextButton(
onPressed: () {},
child: const Text("Forgot password?"),
),
),
ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
fixedSize: const Size(double.maxFinite, 55),
),
child: const Text("Login"),
)
],
),
),
),
);
}
}
If you run the app you should see a beautiful login screen with welcome message, email and password field, forgot password button, and login button.