In this article, we will be implementing a beautiful flutter login template design. We will be using gradients, flutter textfields, flutter container, flutter rows and columns widget, flutter text widgets and many more. At the end of this article, we will provide a complete source code for the mentioned flutter login template design. Click here for an other amazing gradient flutter form UI. But first, if you are new in flutter and want to setup flutter then click here. Let’s jump right into developing the mentioned beautiful Flutter login template.
Flutter Login Template Implementation
Let’s start step by step implementation of the mentioned beautiful flutter login template.
Gradient Background Color
Container( height: double.infinity, width: double.infinity, alignment: Alignment.center, decoration: BoxDecoration( gradient: LinearGradient( colors: [Colors.blue.shade200, Colors.blue.shade900])),)
We have given a gradient colored contained to the body of scaffold. It will implement a blue gradient background for the whole background of the flutter login template.
Title Text Decoration
Container( height: 150, width: 230, decoration: BoxDecoration( gradient: LinearGradient( colors: [Colors.blue.shade200, Colors.blue.shade900]), boxShadow: [ BoxShadow( blurRadius: 4, spreadRadius: 3, color: Colors.black12) ], borderRadius: BorderRadius.circular(200) .copyWith(bottomRight: Radius.circular(0))), child: Container( margin: EdgeInsets.all(15), decoration: BoxDecoration( gradient: LinearGradient(colors: [ Colors.blue.shade200, Colors.blue.shade900 ]), boxShadow: [ BoxShadow( blurRadius: 4, spreadRadius: 3, color: Colors.black12) ], borderRadius: BorderRadius.circular(200) .copyWith(bottomRight: Radius.circular(0))), child: Container( margin: EdgeInsets.all(15), decoration: BoxDecoration( gradient: LinearGradient(colors: [ Colors.blue.shade200, Colors.blue.shade900 ]), boxShadow: [ BoxShadow( blurRadius: 4, spreadRadius: 3, color: Colors.black12) ], borderRadius: BorderRadius.circular(200) .copyWith(bottomRight: Radius.circular(0))), child: Container( margin: EdgeInsets.all(15), decoration: BoxDecoration( gradient: LinearGradient(colors: [ Colors.blue.shade200, Colors.blue.shade900 ]), boxShadow: [ BoxShadow( blurRadius: 4, spreadRadius: 3, color: Colors.black12) ], borderRadius: BorderRadius.circular(200) .copyWith(bottomRight: Radius.circular(0))), child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [ Text( 'Let\'s', style: TextStyle( fontSize: 22, fontWeight: FontWeight.bold, color: Colors.white, shadows: [ Shadow( color: Colors.black45, offset: Offset(1, 1), blurRadius: 5) ]), ), Text( ' Login', style: TextStyle( fontSize: 22, fontWeight: FontWeight.bold, color: Colors.blue.shade600, shadows: [ Shadow( color: Colors.black45, offset: Offset(1, 1), blurRadius: 5) ]), ), ], ), ), ), ), ),
We have decorated the top title text using nested containers, we have used four containers and nest them using the child constructor of each container and also we have given them a gradient background color. We have used a row widget so we can use two flutter text widgets inside the last child container. Code for this design is given below.
Email And Password Flutter Textfields
Padding( padding: EdgeInsets.symmetric(horizontal: 30).copyWith(bottom: 10), child: TextField( style: TextStyle(color: Colors.white, fontSize: 14.5), decoration: InputDecoration( prefixIconConstraints: BoxConstraints(minWidth: 45), prefixIcon: Icon( Icons.email, color: Colors.white70, size: 22, ), border: InputBorder.none, hintText: 'Enter Email', hintStyle: TextStyle(color: Colors.white60, fontSize: 14.5), enabledBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(100) .copyWith(bottomRight: Radius.circular(0)), borderSide: BorderSide(color: Colors.white38)), focusedBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(100) .copyWith(bottomRight: Radius.circular(0)), borderSide: BorderSide(color: Colors.white70))), ), ),
We have used the code of email field above but don’t worry, you will get the code for password textfield at the last of this article. We have used a prefix icon in both email and password textfields. It is the icon that you see before them text. We also have used a hint text, this is the text that is shown when the textfield is empty, to give user a hint of what to write in that specific field. It disappears whenever the user type something in the field and reappears when the field is empty again.
In the password textfield, we have also used a suffix icon which you can see in the right side of the field. We have implemented a logic that whenever you click on it, it will show the text inputted by the user, if it is hidden and hide it if it is shown. We have used a gesture detector class and the textfield constructor named obsureText to implement this. You can check the logic in the code of password textfield.
Forgot Password Clickable Text
Align(
alignment: Alignment.centerRight,
child: GestureDetector(
onTap: () {},
child: Padding(
padding: EdgeInsets.only(right: 30),
child: Text('Forgot Password?',
style:
TextStyle(color: Colors.white70, fontSize: 13)),
),
),
),We can see the forgot password text below the password textfield, we have wrapped it with gesture detector class to make it clickable. You can use the gesture detectors’ constructor to implement some specific functions which will be triggered whenever the user clicks on the forgot password text.
Login Clickable Container Button
GestureDetector(
onTap: () {},
child: Container(
height: 53,
width: double.infinity,
margin: EdgeInsets.symmetric(horizontal: 30),
alignment: Alignment.center,
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
blurRadius: 4,
color: Colors.black12.withOpacity(.2),
offset: Offset(2, 2))
],
borderRadius: BorderRadius.circular(100)
.copyWith(bottomRight: Radius.circular(0)),
gradient: LinearGradient(colors: [
Colors.blue.shade200,
Colors.blue.shade900
])),
child: Text('Login',
style: TextStyle(
color: Colors.white.withOpacity(.8),
fontSize: 15,
fontWeight: FontWeight.bold)),
),
),
We have decorated a flutter container with gradient color, round edges, shadows and a centered text widget and made it clickable by wrapping it with gesture detector class. We can now specify any actions which will be triggered whenever the user clicks on that button.
Signup Container Clickable Button
Text('Don\'t have an account?',
style: TextStyle(color: Colors.white70, fontSize: 13)),
SizedBox(
height: 20,
),
Container(
height: 53,
width: double.infinity,
margin: EdgeInsets.symmetric(horizontal: 30),
alignment: Alignment.center,
decoration: BoxDecoration(
border: Border.all(color: Colors.white60),
borderRadius: BorderRadius.circular(100)
.copyWith(bottomRight: Radius.circular(0)),
),
child: Text('Signup',
style: TextStyle(
color: Colors.white.withOpacity(.8),
fontSize: 15,
fontWeight: FontWeight.bold)),
),
We have used a text widget code as well with the signup container clickable button. The text that you see above the signup button. After that, let’s come to the signup button implementation. It is implemented in the same way as the login button is implemented but with some changes. We have used a colored border in it and a we haven’t specified any background color of the container which makes it transparent. Congrats, we have successfully implemented our beautiful flutter login template design. The whole source code for this beautiful flutter login template is given below.
Source Code
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Beautiful Login Template',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
accentColor: Colors.blue,
primaryColor: Colors.blue,
focusColor: Colors.blue,
cursorColor: Colors.blue),
home: Homepage(),
);
}
}
class Homepage extends StatefulWidget {
const Homepage({Key? key}) : super(key: key);
@override
State<Homepage> createState() => _HomepageState();
}
class _HomepageState extends State<Homepage> {
bool isPasswordVisible = false;
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Container(
height: double.infinity,
width: double.infinity,
alignment: Alignment.center,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.blue.shade200, Colors.blue.shade900])),
child: SingleChildScrollView(
child: Column(
children: [
SizedBox(
height: 50,
),
Container(
height: 150,
width: 230,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.blue.shade200, Colors.blue.shade900]),
boxShadow: [
BoxShadow(
blurRadius: 4,
spreadRadius: 3,
color: Colors.black12)
],
borderRadius: BorderRadius.circular(200)
.copyWith(bottomRight: Radius.circular(0))),
child: Container(
margin: EdgeInsets.all(15),
decoration: BoxDecoration(
gradient: LinearGradient(colors: [
Colors.blue.shade200,
Colors.blue.shade900
]),
boxShadow: [
BoxShadow(
blurRadius: 4,
spreadRadius: 3,
color: Colors.black12)
],
borderRadius: BorderRadius.circular(200)
.copyWith(bottomRight: Radius.circular(0))),
child: Container(
margin: EdgeInsets.all(15),
decoration: BoxDecoration(
gradient: LinearGradient(colors: [
Colors.blue.shade200,
Colors.blue.shade900
]),
boxShadow: [
BoxShadow(
blurRadius: 4,
spreadRadius: 3,
color: Colors.black12)
],
borderRadius: BorderRadius.circular(200)
.copyWith(bottomRight: Radius.circular(0))),
child: Container(
margin: EdgeInsets.all(15),
decoration: BoxDecoration(
gradient: LinearGradient(colors: [
Colors.blue.shade200,
Colors.blue.shade900
]),
boxShadow: [
BoxShadow(
blurRadius: 4,
spreadRadius: 3,
color: Colors.black12)
],
borderRadius: BorderRadius.circular(200)
.copyWith(bottomRight: Radius.circular(0))),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Let\'s',
style: TextStyle(
fontSize: 22,
fontWeight: FontWeight.bold,
color: Colors.white,
shadows: [
Shadow(
color: Colors.black45,
offset: Offset(1, 1),
blurRadius: 5)
]),
),
Text(
' Login',
style: TextStyle(
fontSize: 22,
fontWeight: FontWeight.bold,
color: Colors.blue.shade600,
shadows: [
Shadow(
color: Colors.black45,
offset: Offset(1, 1),
blurRadius: 5)
]),
),
],
),
),
),
),
),
SizedBox(
height: 40,
),
Padding(
padding:
EdgeInsets.symmetric(horizontal: 30).copyWith(bottom: 10),
child: TextField(
style: TextStyle(color: Colors.white, fontSize: 14.5),
decoration: InputDecoration(
prefixIconConstraints: BoxConstraints(minWidth: 45),
prefixIcon: Icon(
Icons.email,
color: Colors.white70,
size: 22,
),
border: InputBorder.none,
hintText: 'Enter Email',
hintStyle:
TextStyle(color: Colors.white60, fontSize: 14.5),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(100)
.copyWith(bottomRight: Radius.circular(0)),
borderSide: BorderSide(color: Colors.white38)),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(100)
.copyWith(bottomRight: Radius.circular(0)),
borderSide: BorderSide(color: Colors.white70))),
),
),
Padding(
padding:
EdgeInsets.symmetric(horizontal: 30).copyWith(bottom: 10),
child: TextField(
style: TextStyle(color: Colors.white, fontSize: 14.5),
obscureText: isPasswordVisible ? false : true,
decoration: InputDecoration(
prefixIconConstraints: BoxConstraints(minWidth: 45),
prefixIcon: Icon(
Icons.lock,
color: Colors.white70,
size: 22,
),
suffixIconConstraints:
BoxConstraints(minWidth: 45, maxWidth: 46),
suffixIcon: GestureDetector(
onTap: () {
setState(() {
isPasswordVisible = !isPasswordVisible;
});
},
child: Icon(
isPasswordVisible
? Icons.visibility
: Icons.visibility_off,
color: Colors.white70,
size: 22,
),
),
border: InputBorder.none,
hintText: 'Enter Password',
hintStyle:
TextStyle(color: Colors.white60, fontSize: 14.5),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(100)
.copyWith(bottomRight: Radius.circular(0)),
borderSide: BorderSide(color: Colors.white38)),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(100)
.copyWith(bottomRight: Radius.circular(0)),
borderSide: BorderSide(color: Colors.white70))),
),
),
SizedBox(
height: 10,
),
Align(
alignment: Alignment.centerRight,
child: GestureDetector(
onTap: () {},
child: Padding(
padding: EdgeInsets.only(right: 30),
child: Text('Forgot Password?',
style:
TextStyle(color: Colors.white70, fontSize: 13)),
),
),
),
SizedBox(
height: 40,
),
GestureDetector(
onTap: () {},
child: Container(
height: 53,
width: double.infinity,
margin: EdgeInsets.symmetric(horizontal: 30),
alignment: Alignment.center,
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
blurRadius: 4,
color: Colors.black12.withOpacity(.2),
offset: Offset(2, 2))
],
borderRadius: BorderRadius.circular(100)
.copyWith(bottomRight: Radius.circular(0)),
gradient: LinearGradient(colors: [
Colors.blue.shade200,
Colors.blue.shade900
])),
child: Text('Login',
style: TextStyle(
color: Colors.white.withOpacity(.8),
fontSize: 15,
fontWeight: FontWeight.bold)),
),
),
SizedBox(
height: 50,
),
Text('Don\'t have an account?',
style: TextStyle(color: Colors.white70, fontSize: 13)),
SizedBox(
height: 20,
),
Container(
height: 53,
width: double.infinity,
margin: EdgeInsets.symmetric(horizontal: 30),
alignment: Alignment.center,
decoration: BoxDecoration(
border: Border.all(color: Colors.white60),
borderRadius: BorderRadius.circular(100)
.copyWith(bottomRight: Radius.circular(0)),
),
child: Text('Signup',
style: TextStyle(
color: Colors.white.withOpacity(.8),
fontSize: 15,
fontWeight: FontWeight.bold)),
),
SizedBox(
height: 20,
)
],
),
),
),
),
);
}
}Note:
That’s all for this article, and I hope you learned a lot from it. Use this beautiful flutter login template in your project, and share your results with us. We would love to see how you’ve used this flutter login template in your Flutter app. We would be looking forward to your reply in our next article in which we explore other amazing flutter widgets and flutter templates. Thanks.
