Best login forms in Flutter with Code
Last Updated on 01 Feb 2022 by Satya Prakash Singh Rathour
10 mins read
1. Login Screen 1
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class LoginScreen1 extends StatelessWidget {
final Color primaryColor = Colors.purpleAccent;
final Color backgroundColor = Colors.white;
final NetworkImage backgroundImage =
const NetworkImage("https://picsum.photos/200/300");
const LoginScreen1({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
child: Container(
height: MediaQuery.of(context).size.height,
decoration: BoxDecoration(
color: backgroundColor,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Expanded(
child: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: backgroundImage,
fit: BoxFit.cover,
),
),
alignment: Alignment.center,
padding: const EdgeInsets.only(top: 100.0, bottom: 100.0),
child: Column(
children: <Widget>[
Text(
"Semikolan",
style: TextStyle(
fontSize: 50.0,
fontWeight: FontWeight.bold,
color: primaryColor),
),
Text(
"Login Screen 1",
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
color: primaryColor),
),
],
),
),
),
const Padding(
padding: EdgeInsets.only(left: 40.0),
child: Text(
"Email",
style: TextStyle(color: Colors.grey, fontSize: 16.0),
),
),
Container(
decoration: BoxDecoration(
border: Border.all(
color: Colors.grey.withOpacity(0.5),
width: 1.0,
),
borderRadius: BorderRadius.circular(20.0),
),
margin: const EdgeInsets.symmetric(
vertical: 10.0, horizontal: 20.0),
child: Row(
children: <Widget>[
const Padding(
padding: EdgeInsets.symmetric(
vertical: 10.0, horizontal: 15.0),
child: Icon(
Icons.person_outline,
color: Colors.grey,
),
),
Container(
height: 30.0,
width: 1.0,
color: Colors.grey.withOpacity(0.5),
margin: const EdgeInsets.only(left: 00.0, right: 10.0),
),
const Expanded(
child: TextField(
decoration: InputDecoration(
border: InputBorder.none,
hintText: 'Enter your email',
hintStyle: TextStyle(color: Colors.grey),
),
),
)
],
),
),
const Padding(
padding: EdgeInsets.only(left: 40.0),
child: Text(
"Password",
style: TextStyle(color: Colors.grey, fontSize: 16.0),
),
),
Container(
decoration: BoxDecoration(
border: Border.all(
color: Colors.grey.withOpacity(0.5),
width: 1.0,
),
borderRadius: BorderRadius.circular(20.0),
),
margin: const EdgeInsets.symmetric(
vertical: 10.0, horizontal: 20.0),
child: Row(
children: <Widget>[
const Padding(
padding: EdgeInsets.symmetric(
vertical: 10.0, horizontal: 15.0),
child: Icon(
Icons.lock_open,
color: Colors.grey,
),
),
Container(
height: 30.0,
width: 1.0,
color: Colors.grey.withOpacity(0.5),
margin: const EdgeInsets.only(left: 00.0, right: 10.0),
),
const Expanded(
child: TextField(
decoration: InputDecoration(
border: InputBorder.none,
hintText: 'Enter your password',
hintStyle: TextStyle(color: Colors.grey),
),
),
)
],
),
),
Container(
margin: const EdgeInsets.only(top: 20.0),
padding: const EdgeInsets.only(left: 20.0, right: 20.0),
child: Row(
children: <Widget>[
Expanded(
child: FlatButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30.0)),
splashColor: primaryColor,
color: primaryColor,
child: Row(
children: <Widget>[
const Padding(
padding: EdgeInsets.only(left: 20.0),
child: Text(
"LOGIN",
style: TextStyle(color: Colors.white),
),
),
Expanded(
child: Container(),
),
Transform.translate(
offset: const Offset(15.0, 0.0),
child: Container(
padding: const EdgeInsets.all(5.0),
child: FlatButton(
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(28.0)),
splashColor: Colors.white,
color: Colors.white,
child: Icon(
Icons.arrow_forward,
color: primaryColor,
),
onPressed: () => {},
),
),
)
],
),
onPressed: () => {},
),
),
],
),
),
Container(
margin: const EdgeInsets.only(top: 10.0),
padding: const EdgeInsets.only(left: 20.0, right: 20.0),
child: Row(
children: <Widget>[
Expanded(
child: TextButton(
// shape: RoundedRectangleBorder(
// borderRadius: BorderRadius.circular(30.0)),
// splashColor: Color(0xFF3B5998),
// color: Color(0xff3B5998),
// style: const ButtonStyle(foregroundColor: Colors.accents),
child: Row(
children: <Widget>[
const Padding(
padding: EdgeInsets.only(left: 20.0),
child: Text(
"LOGIN WITH FACEBOOK",
style: TextStyle(color: Colors.white),
),
),
Expanded(
child: Container(),
),
Transform.translate(
offset: const Offset(15.0, 0.0),
child: Container(
padding: const EdgeInsets.all(5.0),
child: TextButton(
// shape: RoundedRectangleBorder(
// borderRadius:
// BorderRadius.circular(28.0)),
// splashColor: Colors.white,
// color: Colors.white,
child: const Icon(
IconData(0xea90, fontFamily: 'icomoon'),
color: Color(0xff3b5998),
),
onPressed: () => {},
),
),
)
],
),
onPressed: () => {},
),
),
],
),
),
Container(
margin: const EdgeInsets.only(top: 20.0),
padding: const EdgeInsets.only(left: 20.0, right: 20.0),
child: Row(
children: <Widget>[
Expanded(
child: TextButton(
// shape: RoundedRectangleBorder(
// borderRadius: BorderRadius.circular(30.0)),
// color: Colors.transparent,
child: Container(
padding: const EdgeInsets.only(left: 20.0),
alignment: Alignment.center,
child: Text(
"DON'T HAVE AN ACCOUNT?",
style: TextStyle(color: primaryColor),
),
),
onPressed: () => {},
),
),
],
),
),
],
),
),
),
);
}
}
// class MyClipper extends CustomClipper<Path> {
// @override
// Path getClip(Size size) {
// Path p = Path();
// p.lineTo(size.width, 0.0);
// p.lineTo(size.width, size.height * 0.85);
// p.arcToPoint(
// Offset(0.0, size.height * 0.85),
// radius: const Radius.elliptical(50.0, 10.0),
// rotation: 0.0,
// );
// p.lineTo(0.0, 0.0);
// p.close();
// return p;
// }
// @override
// bool shouldReclip(CustomClipper oldClipper) {
// return true;
// }
// }
2. Login Screen 2
import 'package:flutter/material.dart';
class LoginScreen5 extends StatefulWidget {
const LoginScreen5({Key? key}) : super(key: key);
@override
_LoginScreen5State createState() => _LoginScreen5State();
}
class _LoginScreen5State extends State<LoginScreen5> {
TextEditingController emailController = TextEditingController();
TextEditingController passwordController = TextEditingController();
@override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: false,
body: Stack(
children: [
Container(
width: double.infinity,
height: MediaQuery.of(context).size.height,
decoration: const BoxDecoration(
image: DecorationImage(
image: NetworkImage('https://picsum.photos/200/300'),
fit: BoxFit.fill),
),
),
Container(
margin: const EdgeInsets.only(top: 120),
decoration: const BoxDecoration(
color: Color.fromRGBO(53, 55, 88, 1),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(37.5),
topRight: Radius.circular(37.5),
),
),
child: Container(
margin: const EdgeInsets.only(top: 90),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
const Text(
"Welcome Back",
style: TextStyle(
fontSize: 17,
color: Color.fromRGBO(147, 148, 184, 1),
fontWeight: FontWeight.bold),
),
const SizedBox(height: 30),
Container(
margin: const EdgeInsets.only(
top: 22.5, right: 22.5, left: 22.5),
child: TextField(
controller: emailController,
cursorColor: Colors.white,
decoration: const InputDecoration(
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Color.fromRGBO(90, 90, 90, 1))),
icon: Icon(
Icons.email,
color: Colors.white,
),
contentPadding: EdgeInsets.all(11.25),
hintText: "Email",
hintStyle: TextStyle(
color: Colors.white,
),
),
),
),
Container(
margin: const EdgeInsets.only(
top: 22.5, right: 22.5, left: 22.5),
child: TextField(
controller: passwordController,
cursorColor: Colors.white,
decoration: const InputDecoration(
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Color.fromRGBO(90, 90, 90, 1),
),
),
icon: Icon(Icons.lock, color: Colors.white),
contentPadding: EdgeInsets.all(11.25),
hintText: "Password",
hintStyle: TextStyle(
color: Colors.white,
),
),
obscureText: true,
),
),
Container(
width: MediaQuery.of(context).size.width,
height: 60,
margin: const EdgeInsets.only(top: 40, left: 30, right: 30),
child: ElevatedButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all<Color>(
const Color.fromRGBO(255, 87, 34, 1),
),
shape:
MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30),
),
),
),
onPressed: () {},
child: const Text(
"Log in",
style: TextStyle(
fontSize: 17, fontWeight: FontWeight.bold),
),
),
),
Container(
width: MediaQuery.of(context).size.width,
height: 60,
margin: const EdgeInsets.only(top: 20, right: 30, left: 30),
child: TextButton(
style: ButtonStyle(
shape:
MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30),
),
),
),
onPressed: () {},
child: const Text(
"Sign In With Google",
style: TextStyle(
color: Colors.white,
fontSize: 17,
fontWeight: FontWeight.bold,
),
),
),
),
Expanded(
child: Container(
margin: const EdgeInsets.only(top: 60),
width: double.infinity,
decoration: const BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(40),
topRight: Radius.circular(40),
),
),
child: Column(
children: [
IconButton(
icon: const Icon(Icons.keyboard_arrow_up),
onPressed: () {}),
const Text(
"Sign up",
style: TextStyle(
fontSize: 17, fontWeight: FontWeight.bold),
),
],
),
),
),
],
),
),
),
Container(
margin: EdgeInsets.only(
left: MediaQuery.of(context).size.width / 2 - 50,
top: MediaQuery.of(context).size.height / 10.1,
),
child: const CircleAvatar(
radius: 50,
backgroundImage: NetworkImage(
"https://picsum.photos/200/300"),
),
),
],
),
);
}
}
3. Login Form 3
class SignInScreen extends StatelessWidget {
SignInScreen({Key? key}) : super(key: key);
var kPrimaryColor = Color(0xFFFFFFFF);
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: [
Expanded(
flex: 3,
child: Container(
decoration: const BoxDecoration(
image: DecorationImage(
image: NetworkImage(
"https://th.bing.com/th/id/R.dcd3ccbea3a2d80c282556f683251e86?rik=PtYXOrSHHoFlvw&riu=http%3a%2f%2fclipartix.com%2fwp-content%2fuploads%2f2016%2f06%2fStage-spotlight-clip-art-black-background-movies-in-theaters.jpg&ehk=rxZiTnLyUhjyDbFKkjpTZccMesRIG4FD9wy%2f3nkU0HM%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1"),
fit: BoxFit.cover,
alignment: Alignment.bottomCenter,
),
),
),
),
Column(
children: <Widget>[
Expanded(
flex: 4,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 16),
child: Column(
children: <Widget>[
Spacer(),
Padding(
padding: const EdgeInsets.only(bottom: 40),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsets.only(right: 16),
child: Icon(
Icons.alternate_email,
color: kPrimaryColor,
),
),
Expanded(
child: TextField(
decoration: InputDecoration(
hintText: "Email Address",
hintStyle: style_white(),
),
),
)
],
),
),
Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(right: 16),
child: Icon(
Icons.lock,
color: kPrimaryColor,
),
),
Expanded(
child: TextField(
decoration: InputDecoration(
hintText: "Password",
// hi style_white(),
hintStyle: style_white(),
),
),
),
],
),
Spacer(),
Padding(
padding: const EdgeInsets.only(bottom: 30),
child: Row(
children: <Widget>[
Container(
padding: EdgeInsets.all(16),
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(
color: Colors.white,
),
),
child: Icon(
Icons.android,
color: Colors.white,
),
),
SizedBox(width: 20),
Container(
padding: EdgeInsets.all(16),
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(
color: Colors.white,
),
),
child: Icon(
Icons.chat,
color: Colors.white,
),
),
Spacer(),
Container(
padding: EdgeInsets.all(16),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: kPrimaryColor,
),
child: Icon(
Icons.arrow_forward,
color: Colors.black,
),
)
],
),
),
],
),
),
),
],
),
],
),
);
}
TextStyle style_white() {
return TextStyle(
color: Colors.white,
);
}
}
Category: Flutter | App Development
Relavent Tags: Futter