In this article, we will be implementing the mentioned beautiful gradient flutter login UI template. We have made many beautiful flutter templates as well. You should check them out as well and can implement them in your code as they are free to use.
Let’s not waste anymore time and get right into implementing this beautiful gradient Flutter login UI.
Outline
- Flutter Login UI Template Implementation
- Background Color of Flutter Page UI
- Title Text Decoration
- Email and Password Flutter Textfields
- Forgot Password Clickable Text
- Flutter Login Clickable Container Button
- Flutter Signup Clickable Container Button
- Gradient Flutter Login UI Design Source Code
- Conclusion
Flutter Login UI Template Implementation
Let’s start step by step implementation on how to achieve the mentioned flutter login UI template.
Background Color of Flutter Login UI
Container( height: double.infinity, width: double.infinity, alignment: Alignment.center, decoration: BoxDecoration( gradient: LinearGradient( colors: [Colors.green.shade200, Colors.green.shade900])),)
By giving the body constructor of scaffold a container having gradient background, as shown in the above code, we have set the background of our beautiful flutter login UI to a gradient color of green.
Title Text Decoration
Container( height: 150, width: 230, decoration: BoxDecoration( gradient: LinearGradient(colors: [ Colors.green.shade200, Colors.green.shade900 ]), boxShadow: [ BoxShadow( blurRadius: 4, spreadRadius: 3, color: Colors.black12) ], borderRadius: BorderRadius.circular(200).copyWith( bottomRight: Radius.circular(0), topLeft: Radius.circular(0))), child: Container( margin: EdgeInsets.all(20), decoration: BoxDecoration( gradient: LinearGradient(colors: [ Colors.green.shade200, Colors.green.shade900 ]), boxShadow: [ BoxShadow( blurRadius: 4, spreadRadius: 3, color: Colors.black12) ], borderRadius: BorderRadius.circular(200).copyWith( bottomRight: Radius.circular(0), topLeft: 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.green.shade600, shadows: [ Shadow( color: Colors.black45, offset: Offset(1, 1), blurRadius: 5) ]), ), ], ), ), ),
In our flutter login UI template, for making a leaf shaped container, we have made the top left and the bottom right edge sharp and made the others two rounded, we have given both the containers a gradient background color and also a shadow. We also have used a row widget and inside that, we have used two text widgets with customized decorations.
Email and Password Flutter Textfields
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(30).copyWith(
bottomRight: Radius.circular(0),
topLeft: Radius.circular(0)),
borderSide: BorderSide(color: Colors.white38)),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(30).copyWith(
bottomRight: Radius.circular(0),
topLeft: Radius.circular(0)),
borderSide: BorderSide(color: Colors.white70))),
),
),For our beautiful flutter login UI template, we have used flutter textfields for both email and password. We have used prefix icon which you can see before the text for each field. We also have used flutter hint text for both fields, it is the text that is shown when the flutter textfield is empty which disappears when the user starts writing something in that field and reappears again when the field is empty again.
In the password textfield, we have used a flutter suffix icon, we can see it in the right side of the password field, we have implemented a logic in which if you click on it then if the entered password text is hidden then it will be shown and vice versa. We have used gesture detector class and the flutter textfield constructor named obscure text for the implementation.
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 have used a forgot password text in our flutter login UI template which you can see below the password field, we have wrapped it with a gesture detector class to make it clickable. We can specify some functions that will be triggered when we tap on this text.
Flutter 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(30).copyWith(
bottomRight: Radius.circular(0),
topLeft: Radius.circular(0)),
gradient: LinearGradient(colors: [
Colors.green.shade200,
Colors.green.shade900
])),
child: Text('Login',
style: TextStyle(
color: Colors.white.withOpacity(.8),
fontSize: 15,
fontWeight: FontWeight.bold)),
),
),We have used a container with a gradient color, customized edges to make our flutter login UI even more attractive. We have used a centered text widget inside this container. To make it clickable, we have wrapped it with a gesture detector class. We can now specify some functions that will work after we click this container.
Flutter Signup Clickable Container Button
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(30).copyWith(
bottomRight: Radius.circular(0),
topLeft: Radius.circular(0)),
),
child: Text('Signup',
style: TextStyle(
color: Colors.white.withOpacity(.8),
fontSize: 15,
fontWeight: FontWeight.bold)),
),In our flutter login UI, we have implemented the signup button the same way as we have implemented the login button but with some changes like, we have specified the border color and a transparent container background which is implemented automatically when you don’t specify any color of the container. A simple text widget that you see above the flutter signup button shows that if you are new then click the signup button.
Congrats, we have made it to the end and have successfully implemented the mentioned beautiful gradient flutter login page UI design template. The flutter login page UI source code is given below.
Gradient Flutter Login UI Design 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.green,
accentColor: Colors.green,
primaryColor: Colors.green,
focusColor: Colors.green,
cursorColor: Colors.green),
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.green.shade200, Colors.green.shade900])),
child: SingleChildScrollView(
child: Column(
children: [
SizedBox(
height: 50,
),
Container(
height: 150,
width: 230,
decoration: BoxDecoration(
gradient: LinearGradient(colors: [
Colors.green.shade200,
Colors.green.shade900
]),
boxShadow: [
BoxShadow(
blurRadius: 4,
spreadRadius: 3,
color: Colors.black12)
],
borderRadius: BorderRadius.circular(200).copyWith(
bottomRight: Radius.circular(0),
topLeft: Radius.circular(0))),
child: Container(
margin: EdgeInsets.all(20),
decoration: BoxDecoration(
gradient: LinearGradient(colors: [
Colors.green.shade200,
Colors.green.shade900
]),
boxShadow: [
BoxShadow(
blurRadius: 4,
spreadRadius: 3,
color: Colors.black12)
],
borderRadius: BorderRadius.circular(200).copyWith(
bottomRight: Radius.circular(0),
topLeft: 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.green.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(30).copyWith(
bottomRight: Radius.circular(0),
topLeft: Radius.circular(0)),
borderSide: BorderSide(color: Colors.white38)),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(30).copyWith(
bottomRight: Radius.circular(0),
topLeft: 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(30).copyWith(
bottomRight: Radius.circular(0),
topLeft: Radius.circular(0)),
borderSide: BorderSide(color: Colors.white38)),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(30).copyWith(
bottomRight: Radius.circular(0),
topLeft: 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(30).copyWith(
bottomRight: Radius.circular(0),
topLeft: Radius.circular(0)),
gradient: LinearGradient(colors: [
Colors.green.shade200,
Colors.green.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(30).copyWith(
bottomRight: Radius.circular(0),
topLeft: Radius.circular(0)),
),
child: Text('Signup',
style: TextStyle(
color: Colors.white.withOpacity(.8),
fontSize: 15,
fontWeight: FontWeight.bold)),
),
SizedBox(
height: 20,
)
],
),
),
),
),
);
}
}Conclusion
That’s pretty much all for this article, hope you now have a detailed knowledge of how to create this beautiful gradient Flutter login UI template. Use it in your flutter app, and we will look forward to hearing how it functions. Hope to see you in our next articles in which we analyze other beautiful flutter widgets. Some of these articles are listed below. Thanks for reading this post.
We’d be very glad to see you visit our other tutorials on Flutter app development and Python programming. Thank you for reading this article.
