In this Flutter post, we will see how to design the mentioned beautiful Flutter login screen design. A proper example will be provided to understand the practical implementation of Flutter login screen UI design. So let’s not keep you waiting anymore and start understanding how to create this amazing Flutter login screen design.
Implementing Flutter Login Screen UI Design (All Steps)
- First we will give a gradient background color to this Flutter login screen template by the use of gradient Flutter container widget.
- We will use nested Flutter containers of gradient background color of different values from the one mentioned above. We will pass these nested Flutter containers to the child constructor of the above mentioned container widget.
- We will be using two Flutter textfields, one for username and the second for password. We will implement a simple logic in which if the user clicks the right icon of password textfield then it will show the input of the user and if pressed again then it will hide that input.
- A clickable Flutter textfield will also be used for forgot password. The text widget will be made clickable using the Flutter ink well class.
- We will be using a container widget for both login and sign buttons. To make these container act like a button, we have to make it clickable which means we have to wrap them inside gesture detector class and by using the onTap constructor, we can specify any function we want in it.
Finally, we have theoretically implemented our Flutter login screen design. I know the theory is very boring to read. Don’t worry, the complete source code is given in the next section in which you will see the above theory in practical code format.
Hope you will like it. Also if you are stuck somewhere or if you have any questions related to the implementation of this beautiful Flutter login screen UI design, then do let me know in the comments. I would love to answer all.
Flutter Login Screen 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,
alignment: Alignment.center,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.red.shade700, Colors.red.shade200])),
child: Container(
width: 320,
height: 320,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30)
.copyWith(topRight: Radius.circular(0)),
gradient:
LinearGradient(colors: [Colors.red, Colors.white12])),
child: Container(
margin: EdgeInsets.all(20),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30)
.copyWith(topRight: Radius.circular(0)),
gradient: LinearGradient(
colors: [Colors.red, Colors.white12])),
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 username',
hintStyle: TextStyle(
color: Colors.white70, fontSize: 15),
prefixIconConstraints:
BoxConstraints(maxHeight: 10),
prefixIcon: Padding(
padding: EdgeInsets.only(right: 10),
child: Icon(
Icons.person,
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(12),
gradient: LinearGradient(colors: [
Colors.red,
Colors.red.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(12),
gradient: LinearGradient(colors: [
Colors.red.shade300,
Colors.red.shade200
])),
child: Text(
'SIGNUP',
style: TextStyle(
color: Colors.white.withOpacity(.8),
fontSize: 13,
fontWeight: FontWeight.w500),
),
),
)
],
),
),
),
))));
}
}Conclusion
In conclusion, hope you now have a complete idea of how the amazing Flutter login screen template design is implemented. I would love to see you customize this design in your own aesthetic sense and share your design with us.
I would also love to see you visit my other posts related to Flutter widgets, animations in Flutter, Flutter templates and many more. Thanks for reading this post.