In this Flutter post, we’ll see how to make this beautiful Flutter login form design practically using a proper example code. We’ll explain it step by step so you can have a clear idea of how this login form design is implemented.
After reading this post, I hope you’ll understand and also able to customize this Flutter login design in your own way.
So let’s keep you waiting anymore and just get right into its practical implementation.
Step By Step Explanation of Flutter Login Form Design
Read carefully all the following steps to have a complete understanding of this Flutter login form design template.
Background Color
We’ll first set the background color of our login screen template by using Flutter container widget and passing it to the body constructor of Flutter scaffold widget.
We’ll give this container a max height and width with a brown color. See below code for practical understanding:
Container( height: double.infinity, width: double.infinity, color: Colors.brown, )
Flutter Container Widget with Shadow
We will give that container a 70 percent width of screen by using the MediaQuery. Then we have used its decoration constructor to give that container a background color and also a shadow with some offset which you can see in the above image. Ignore the fields for now. See below code:
Container( width: MediaQuery.of(context).size.width * .7, decoration: BoxDecoration( color: Colors.brown, boxShadow: [ BoxShadow( color: Colors.white24, spreadRadius: 1, blurRadius: 8, offset: Offset(4, 5)) ]),)
Email and Password Flutter Textfields
We have used a Flutter column widget to implement the textfields and the buttons in vertical order. Let’s first talk about these Flutter textfield widgets.
We have decorated these Flutter textfield widgets with a prefix icon, hint text, underline border and some text style. See the code for email textfield below as both of these fields have the same code. Also, we don’t want any bulkiness of code here.
Don’t worry, the complete source code will be provided in the end. See below code for now:
TextField( style: TextStyle(color: Colors.white70, fontSize: 13), decoration: InputDecoration( isDense: true, prefixIconConstraints: BoxConstraints(maxWidth: 30), prefixIcon: Padding( padding: EdgeInsets.only(right: 10), child: Icon(Icons.email, color: Colors.white54), ), hintText: 'Enter email', hintStyle: TextStyle( color: Colors.white54, fontSize: 13), enabledBorder: UnderlineInputBorder( borderSide: BorderSide( width: .8, color: Colors.white54)), focusedBorder: UnderlineInputBorder( borderSide: BorderSide( width: .8, color: Colors.white70))), )
Forgot Password Clickable Text Widget
Using the Flutter text widget with some text style and wrapping it with Flutter inkwell class. We’ve our clickable Flutter text widget. You can specify any action in the function body that will be passed to the onTap constructor of ink well widget class.
Align(
alignment: Alignment.centerRight,
child: InkWell(
onTap: () {},
child: Padding(
padding: EdgeInsets.only(right: 10),
child: Text(
'Forgot Password?',
style: TextStyle(
color: Colors.white70,
fontWeight: FontWeight.w500,
fontSize: 12),
),
),
),
)Clickable Flutter Container Widgets (SignIn and Register)
We have a Flutter container widget with a child text widget, shadow and color. Simply wrap this container widget with Flutter gesture detector class. You can specify actions in the body function that will be passed to the gesture detector’s onTap constructor.
Code for both clickable Flutter container widgets are same so here we’ll only specify the code of login button. See below:
GestureDetector(
onTap: () {
},
child: Container(
padding: EdgeInsets.all(
15,
),
alignment: Alignment.center,
margin: EdgeInsets.all(15),
decoration:
BoxDecoration(color: Colors.brown, boxShadow: [
BoxShadow(
color: Colors.white24,
spreadRadius: 1,
blurRadius: 4,
offset: Offset(2, 2))
]),
child: Text(
'SIGN IN',
style: TextStyle(
fontSize: 12,
color: Colors.white70,
fontWeight: FontWeight.w600,
),
)),
)So this is how this beautiful Flutter login form design template is created. Hope you now have a detailed idea of how it’s customized.
Feel free to ask if you have any questions related to the implementation of this Flutter login form design. I’d be very happy to answer all your questions.
The complete source code of the Flutter login form design is given in the next section.
Flutter Login Form Design Template Complete 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> {
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Container(
height: double.infinity,
width: double.infinity,
color: Colors.brown,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
width: MediaQuery.of(context).size.width * .7,
decoration: BoxDecoration(color: Colors.brown, boxShadow: [
BoxShadow(
color: Colors.white24,
spreadRadius: 1,
blurRadius: 8,
offset: Offset(4, 5))
]),
child: Column(
children: [
Padding(
padding: EdgeInsets.all(20).copyWith(bottom: 10),
child: Column(
children: [
TextField(
style:
TextStyle(color: Colors.white70, fontSize: 13),
decoration: InputDecoration(
isDense: true,
prefixIconConstraints:
BoxConstraints(maxWidth: 30),
prefixIcon: Padding(
padding: EdgeInsets.only(right: 10),
child:
Icon(Icons.email, color: Colors.white54),
),
hintText: 'Enter email',
hintStyle: TextStyle(
color: Colors.white54, fontSize: 13),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(
width: .8, color: Colors.white54)),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(
width: .8, color: Colors.white70))),
),
SizedBox(
height: 15,
),
TextField(
style:
TextStyle(color: Colors.white70, fontSize: 13),
decoration: InputDecoration(
isDense: true,
prefixIconConstraints:
BoxConstraints(maxWidth: 30),
prefixIcon: Padding(
padding: EdgeInsets.only(right: 10),
child:
Icon(Icons.lock, color: Colors.white54),
),
hintText: 'Enter password',
hintStyle: TextStyle(
color: Colors.white54, fontSize: 13),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(
width: .8, color: Colors.white54)),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(
width: .8, color: Colors.white70))),
)
],
),
),
Align(
alignment: Alignment.centerRight,
child: InkWell(
onTap: () {},
child: Padding(
padding: EdgeInsets.only(right: 10),
child: Text(
'Forgot Password?',
style: TextStyle(
color: Colors.white70,
fontWeight: FontWeight.w500,
fontSize: 12),
),
),
),
),
SizedBox(
height: 10,
),
GestureDetector(
onTap: () {
},
child: Container(
padding: EdgeInsets.all(
15,
),
alignment: Alignment.center,
margin: EdgeInsets.all(15),
decoration:
BoxDecoration(color: Colors.brown, boxShadow: [
BoxShadow(
color: Colors.white24,
spreadRadius: 1,
blurRadius: 4,
offset: Offset(2, 2))
]),
child: Text(
'SIGN IN',
style: TextStyle(
fontSize: 12,
color: Colors.white70,
fontWeight: FontWeight.w600,
),
)),
),
GestureDetector(
onTap: () {
},
child: Container(
padding: EdgeInsets.all(
15,
),
alignment: Alignment.center,
margin: EdgeInsets.all(15).copyWith(top: 0),
decoration:
BoxDecoration(color: Colors.brown, boxShadow: [
BoxShadow(
color: Colors.white24,
spreadRadius: 1,
blurRadius: 4,
offset: Offset(2, 2))
]),
child: Text(
'Register',
style: TextStyle(
fontSize: 12,
color: Colors.white70,
fontWeight: FontWeight.w600,
),)),)],),),],),),),);}}Conclusion
To conclude this post, we’ve discussed this beautiful Flutter login form design step by step with practical example. I would love to hear your thoughts on this Flutter template. Thank you for reading this post.
