In this Flutter post, we’ll practically understand how to design this beautiful Flutter login form template design. A step by step explanation will be provided so you can easily understand how this Flutter login form design is implemented. Also, if you want then you will easily customize that design.
So let’s not keep you waiting any longer and begin learning how we can implement this amazing Flutter login form design.
Outline
- Implementing Flutter Login Form UI Design(All Steps)
- Step 1: Gradient Background Color
- Step 2: Nested Flutter Containers
- Step 3: Email and Password Flutter Textfields
- Step 4: Clickable Flutter Text Widget
- Step 5: Clickable Flutter Container Buttons
- Flutter Login Form Design Template Source Code
- Conclusion
Implementing Flutter Login Form UI Design(All Steps)
Let’s start discussing step by step of how to create this Flutter login form design. All the steps are listed below:
Step 1: Gradient Background Color
In order to have a background of color gradient, we have to use a Flutter container and give it a gradient background color with a size to fill the whole screen.
Step 2: Nested Flutter Containers
Using the Flutter column widget so we can first display the top right leaves like shape. They are actually nested Flutter container widgets having gradient colors with customized border radius.
Step 3: Email and Password Flutter Textfields
In order to get input from the user, two Flutter textfields are implemented. First one is to get email and second one for password. Also a logic is implemented in which if you click on the eye icon in password Flutter textfield then it will show the password and will hide it if tapped again.
Step 4: Clickable Flutter Text Widget
A Flutter text widget can be seen below the password textfield. In order to make it clickable, we have to wrap it with Flutter ink well class. We can define any action in the body function that will be passed to the onTap constructor of ink well class.
Step 5: Clickable Flutter Container Buttons
Two Flutter containers having a gradient color with some border radius and a centered Flutter text of login and signup. In order to make it clickable, wrap it with gesture detector class and specify any action in the body of function that will be passed to the gesture detector class’s onTap constructor.
So this is how you can easily create this beautiful Flutter login form design. The complete source code of the Flutter login form is available in the next section.
I would highly encourage you to customize the Flutter login form design and share it with us. I would love to see it. In you still have any questions related to the implementation of this beautiful Flutter login form design then do ask in the comment section. I would love to answer them.
Flutter Login Form Design Template 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(
debugShowCheckedModeBanner: false,
home: Homepage(),
);
}
}
class Homepage extends StatefulWidget {
@override
State<Homepage> createState() => _HomepageState();
}
class _HomepageState extends State<Homepage> {
bool showPassword = false;
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Container(
height: double.infinity,
width: double.infinity,
decoration: BoxDecoration(
gradient: LinearGradient(colors: [
Colors.purple.shade700,
Colors.purple.shade200
])),
child: SingleChildScrollView(
child: Column(
children: [
Align(
alignment: Alignment.topRight,
child: Container(
width: 150,
height: 150,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(80).copyWith(
topRight: Radius.circular(0),
bottomLeft: Radius.circular(0)),
gradient: LinearGradient(
colors: [Colors.purple, Colors.white12])),
child: Container(
margin:
EdgeInsets.all(20).copyWith(right: 0, top: 0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(80)
.copyWith(
topRight: Radius.circular(0),
bottomLeft: Radius.circular(0)),
gradient: LinearGradient(
colors: [Colors.purple, Colors.white12])),
child: Container(
margin:
EdgeInsets.all(20).copyWith(right: 0, top: 0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(80)
.copyWith(
topRight: Radius.circular(0),
bottomLeft: Radius.circular(0)),
gradient: LinearGradient(
colors: [Colors.purple, Colors.white12])),
),
),
),
),
SizedBox(
height: 10,
),
SizedBox(
width: 320,
height: 320,
child: Padding(
padding: EdgeInsets.symmetric(
horizontal: 20, vertical: 10),
child: Column(
children: [
TextField(
style: TextStyle(
color: Colors.white, fontSize: 15),
cursorColor: Colors.white,
decoration: InputDecoration(
hintText: 'Enter email',
hintStyle: TextStyle(
color: Colors.white70, fontSize: 15),
prefixIconConstraints:
BoxConstraints(maxHeight: 10),
prefixIcon: Padding(
padding: EdgeInsets.only(right: 10),
child: Icon(
Icons.email,
color: Colors.white70,
size: 20,
),
),
contentPadding:
EdgeInsets.only(top: 14, right: 10),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Colors.white, width: .2)),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Colors.white, width: .2))),
),
SizedBox(
height: 10,
),
TextField(
style: TextStyle(
color: Colors.white, fontSize: 15),
cursorColor: Colors.white,
obscureText: showPassword ? false : true,
decoration: InputDecoration(
hintText: 'Enter password',
hintStyle: TextStyle(
color: Colors.white70, fontSize: 15),
contentPadding:
EdgeInsets.only(top: 14, right: 10),
prefixIconConstraints:
BoxConstraints(maxHeight: 10),
prefixIcon: Padding(
padding: EdgeInsets.only(right: 10),
child: Icon(
Icons.lock,
color: Colors.white70,
size: 19,
),
),
suffixIconConstraints:
BoxConstraints(maxHeight: 10),
suffixIcon: GestureDetector(
onTap: () {
setState(() {
showPassword = !showPassword;
});
},
child: Padding(
padding: EdgeInsets.only(left: 10),
child: Icon(
showPassword
? Icons.visibility
: Icons.visibility_off,
color: Colors.white70,
size: 20,
),
),
),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Colors.white, width: .2)),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Colors.white, width: .2))),
),
SizedBox(
height: 10,
),
Align(
alignment: Alignment.centerRight,
child: InkWell(
onTap: () {},
child: Text(
'Forgot password?',
style: TextStyle(
color: Colors.white.withOpacity(.8),
fontSize: 13),
),
),
),
SizedBox(
height: 20,
),
GestureDetector(
onTap: () {},
child: Container(
padding: EdgeInsets.all(15),
alignment: Alignment.center,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50)
.copyWith(
topRight: Radius.circular(0)),
gradient: LinearGradient(colors: [
Colors.purple,
Colors.purple.shade200
])),
child: Text(
'LOGIN',
style: TextStyle(
color: Colors.white.withOpacity(.8),
fontSize: 13,
fontWeight: FontWeight.w500),
),
),
),
SizedBox(
height: 10,
),
GestureDetector(
onTap: () {},
child: Container(
padding: EdgeInsets.all(15),
alignment: Alignment.center,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50)
.copyWith(
topRight: Radius.circular(0)),
gradient: LinearGradient(colors: [
Colors.purple.shade300,
Colors.purple.shade200
])),
child: Text(
'SIGNUP',
style: TextStyle(
color: Colors.white.withOpacity(.8),
fontSize: 13,
fontWeight: FontWeight.w500),
),
),
)
],
),
),
),
],
),
))));
}Conclusion
In conclusion, hope you now have a good practical knowledge about how this magnificent Flutter login form template is designed. Please do not hesitate to customize this design in your unique vision and share it with us.
I would also highly refer my other posts. These are related to Flutter app development, Flutter books, Flutter templates, custom animations in Flutter, Flutter widgets, Flutter web templates and many more.
Flutter app articles you might:
Flutter development, Widgets in Flutter, Flutter bottom navigation bar, Flutter basics for beginners.
You might also like:
How To Easily Change Flutter Glassmorphism Container Size
How To Easily Use Flutter Snackbar Widget
How To Design Beautiful Flutter Login Screen – Free Source Code
