In this article, we will be creating a beautiful Flutter login UI form template, but first, if you want a complete setup on how to install flutter on windows and build your flutter app instantly, then click here, Let’s jump right into creating the beautiful mentioned flutter login UI form template.
Outline
- Implementing Flutter Login UI Form
- Screen Background Color Of Flutter Login UI
- Title Text Of Flutter Login UI Template
- Email And Password Flutter Textfields
- Forgot Password Clickable Flutter Text Widget
- Login Clickable Flutter Container Button
- Signup Clickable Flutter Container Button
- Source Code Of Beautiful Flutter Login UI Form Template
- Conclusion
Implementing Flutter Login UI Form
Let’s create this beautiful Flutter login UI form step by step.
Screen Background Color Of Flutter Login UI
Container( height: double.infinity, width: double.infinity, alignment: Alignment.center, decoration: BoxDecoration( gradient: LinearGradient( colors: [Colors.purple.shade200, Colors.purple.shade900])),)
Title Text Of Flutter Login UI Template
Container( height: 120, width: 210, decoration: BoxDecoration( gradient: LinearGradient(colors: [ Colors.purple.shade200, Colors.purple.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.purple.shade200, Colors.purple.shade900 ]), boxShadow: [ BoxShadow( blurRadius: 4, spreadRadius: 3, color: Colors.black12) ], borderRadius: BorderRadius.circular(50).copyWith( bottomRight: Radius.circular(0), topLeft: Radius.circular(0))), child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [ Text( 'Log', style: TextStyle( fontSize: 22, fontWeight: FontWeight.bold, color: Colors.white, shadows: [ Shadow( color: Colors.black45, offset: Offset(1, 1), blurRadius: 5) ]), ), Text( 'in', style: TextStyle( fontSize: 22, fontWeight: FontWeight.bold, color: Colors.purple.shade600, shadows: [ Shadow( color: Colors.black45, offset: Offset(1, 1), blurRadius: 5) ]), ), ], ), ), ),
We have used nested Flutter containers with gradient colors, a border radius decoration and a shadow as well. We have used a flutter row widget in which we have used two text widgets in which we have specified the text ‘Login’, we have given the text a decoration as well. All the customization that we have used in the Flutter login UI are discussed in detail in our previous articles so if you have time then you can check them as well.
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(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))), ), ),
We have used the email textfield code above to avoid the bulkiness. Password field code is available in the complete source code at the end of this article. As you can see, we have used flutter textfields, we have used prefix icon which is the icon that we see in the flutter textfields before the text. We also have used hint text widget that is shown when the textfield is empty, means when the user haven’t made any input, but it disappears when the user start inputting in the textfield and reappears when the textfield is empty again.
In the password textfield, we have used a suffix icon, it is the icon that you can see in the right of the passw0rd textfield, we have implemented a simple logic which is when the user click on icon, it will show the password field text widget if it is hidden and hide it if it is shown. We have implemented it using the gesture detector to make the suffix icon clickable and using the obscure text constructor of the password textfield.
Forgot Password Clickable Flutter Text Widget
In our beautiful Flutter login UI for, we will use the forgot password textfield. Forgot password text is the text widget that you see below the password Flutter textfield. We wrapped it with a gesture detector class so now it is clickable and we can specify some actions that will be triggered when we tap on the forgot password text.
Login Clickable Flutter 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.purple.shade200,
Colors.purple.shade900
])),
child: Text('Login',
style: TextStyle(
color: Colors.white.withOpacity(.8),
fontSize: 15,
fontWeight: FontWeight.bold)),
),
),We have given the container a gradient color in our Flutter login UI form design, decorated it edges using the border radius, given the container a shadow and a child flutter text widget. We wrapped the Flutter container with a flutter gesture detector class. Now we can specify some functions that will be performed when we click on this clickable container button.
Signup Clickable Flutter 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)),
),This container is also clickable, with gradient color, customized edges and a shadow. A child Flutter text widget is also specified in it. We have used a colored border and a transparent container background color, which is automatically implemented when you do not specify any color of the container. We also have specified a text which states if you do not have an account then click on the signup button.
Congrats, we have implemented our flutter login UI design. Complete source code is given below.
Source Code Of Beautiful Flutter Login UI Form Template
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.purple,
accentColor: Colors.purple,
primaryColor: Colors.purple,
focusColor: Colors.purple,
cursorColor: Colors.purple),
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.purple.shade200, Colors.purple.shade900])),
child: SingleChildScrollView(
child: Column(
children: [
SizedBox(
height: 50,
),
Container(
height: 120,
width: 210,
decoration: BoxDecoration(
gradient: LinearGradient(colors: [
Colors.purple.shade200,
Colors.purple.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.purple.shade200,
Colors.purple.shade900
]),
boxShadow: [
BoxShadow(
blurRadius: 4,
spreadRadius: 3,
color: Colors.black12)
],
borderRadius: BorderRadius.circular(50).copyWith(
bottomRight: Radius.circular(0),
topLeft: Radius.circular(0))),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Log',
style: TextStyle(
fontSize: 22,
fontWeight: FontWeight.bold,
color: Colors.white,
shadows: [
Shadow(
color: Colors.black45,
offset: Offset(1, 1),
blurRadius: 5)
]),
),
Text(
'in',
style: TextStyle(
fontSize: 22,
fontWeight: FontWeight.bold,
color: Colors.purple.shade600,
shadows: [
Shadow(
color: Colors.black45,
offset: Offset(1, 1),
blurRadius: 5)
]),
),
],
),
),
),
SizedBox(
height: 40,
),
Container(
margin: EdgeInsets.symmetric(horizontal: 20),
height: 250,
decoration: BoxDecoration(
gradient: LinearGradient(colors: [
Colors.purple.shade200,
Colors.purple.shade900
]),
boxShadow: [
BoxShadow(
blurRadius: 4,
spreadRadius: 3,
color: Colors.black12)
],
borderRadius: BorderRadius.circular(100).copyWith(
bottomRight: Radius.circular(0),
topLeft: Radius.circular(0))),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
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.purple.shade200,
Colors.purple.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 everything for this article, hope you like this Flutter login UI form template and have learned everything about how this beautiful Flutter login UI form is implemented. Use it in your flutter app and let us know what you think. We would be looking forward to seeing how you have used it in your app. Look forward to people learning about other flutter cool widgets.
See you in the following articles, in which we will explore other beautiful Flutter widgets and templates. Thank you 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.
