In this Flutter tutorial, we will learn how to design the mentioned beautiful gradient Flutter login screen UI. A proper example will step by step explanation will be provided to understand how this gradient UI design is practically implemented.
Implementing Gradient Flutter Login Screen UI Design (All Steps)
- We’ll start by giving a gradient background color to this Flutter login screen UI by using a gradient Flutter container widget.
- We will then use a Flutter stack widget. By using this, we’ll create some circular containers which will be shown in the different positions in the background using Flutter positioned widget.
- After that, we’ll use two Flutter textfields for email and password. We will implement a simple logic in which if the user clicks the right suffix icon of password textfield then it will show the input of the user and if pressed again then it will hide that input. We’ll also use hint text, prefix icon and underline border decoration to make the textfields look more professional.
- A clickable forgot password text will also be created. The text widget will be made clickable using the Flutter ink well widget class. You can specify any logic inside the function passed to this inkwell onTap constructor.
- We will be using a container widget for both login and sign up buttons. To make these containers act like buttons, we have to make them clickable. It means we have to wrap them inside Flutter gesture detector widget class(or Flutter inkwell widget) and by using its onTap constructor, we can specify any function we want in it. For demonstration, we’ve used a Flutter snackbar widget in it.
Finally, we have theoretically implemented our Flutter login screen UI design. I know the theory is a bit boring to read. Don’t worry, the complete source code of this gradient Flutter login screen UI is given in the next section in which you’ll be able to 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 gradient Flutter login screen UI template, then do let me know in the comment section. I would love to answer all your questions.
The complete source code of the mentioned beautiful Flutter login template is provided in the below section.
Gradient Flutter Login Screen UI Design Source Code
import 'package:flutter/material.dart';
main() {
runApp(myApp());
}
class myApp extends StatelessWidget {
const myApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: LoginScreen(),
);
}
}
// beautiful Flutter login screen UI
class LoginScreen extends StatefulWidget {
const LoginScreen({Key? key}) : super(key: key);
@override
State<LoginScreen> createState() => _LoginScreenState();
}
class _LoginScreenState extends State<LoginScreen> {
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.blue, Colors.purple])),
child: Stack(
children: [
Positioned(top: 50, left: 100, child: customContainer(100, 100)),
Positioned(top: 50, right: 70, child: customContainer(150, 150)),
Positioned(
top: 100,
right: 150,
child: customContainer(100, 100),
),
Positioned(
bottom: 200,
right: 150,
child: customContainer(50, 50),
),
Positioned(
top: 280,
right: 100,
child: customContainer(100, 100),
),
SingleChildScrollView(
padding: EdgeInsets.only(top: 250),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
emailField(),
passwordField(),
forgotPassword(),
loginButton(),
registerButton()
],
),
)
],
),
),
),
);
}
// Beautiful flutter login screen ui design
Widget customContainer(height, width) {
return Container(
height: double.parse(height.toString()),
width: double.parse(width.toString()),
decoration: BoxDecoration(
shape: BoxShape.circle,
gradient: LinearGradient(colors: [Colors.blue, Colors.purple])),
);
}
Widget emailField() {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 60),
child: TextField(
style: TextStyle(color: Colors.white70, fontSize: 14),
decoration: InputDecoration(
prefixIconConstraints: BoxConstraints(minWidth: 24),
prefixIcon: Padding(
padding: EdgeInsets.only(right: 10),
child: Icon(
Icons.email,
color: Colors.white70,
size: 20,
),
),
hintText: 'Enter email',
hintStyle: TextStyle(color: Colors.white60, fontSize: 14),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white60, width: .4)),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white70, width: .4))),
));
}
Widget passwordField() {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 60).copyWith(top: 12),
child: TextField(
obscureText: showPassword ? false : true,
style: TextStyle(color: Colors.white70, fontSize: 14),
decoration: InputDecoration(
prefixIconConstraints: BoxConstraints(minWidth: 24),
suffixIconConstraints: BoxConstraints(minWidth: 24),
prefixIcon: Padding(
padding: EdgeInsets.only(right: 10),
child: Icon(
Icons.lock,
color: Colors.white70,
size: 20,
),
),
suffixIcon: Padding(
padding: EdgeInsets.only(left: 10),
child: GestureDetector(
onTap: () {
setState(() {
showPassword = !showPassword;
});
},
child: Icon(
showPassword ? Icons.visibility : Icons.visibility_off,
color: Colors.white70,
size: 20,
),
),
),
hintText: 'Enter password',
hintStyle: TextStyle(color: Colors.white60, fontSize: 14),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white60, width: .4)),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white70, width: .4))),
));
}
Widget forgotPassword() {
return Align(
alignment: Alignment.centerRight,
child: Padding(
padding: const EdgeInsets.only(top: 10, right: 58, bottom: 50),
child: InkWell(
onTap: () {
// navigate to other screen
},
child: Text(
'Forgot password?',
style: TextStyle(
color: Colors.white70,
fontSize: 12,
fontWeight: FontWeight.w700),
),
),
),
);
}
Widget loginButton() {
return GestureDetector(
onTap: () {
ScaffoldMessenger.of(context)
.showSnackBar(SnackBar(content: Text('Login clicked')));
},
child: Container(
alignment: Alignment.center,
margin: EdgeInsets.symmetric(horizontal: 60).copyWith(bottom: 15),
height: 50,
width: double.infinity,
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
offset: Offset(3, 3),
blurRadius: 4,
spreadRadius: 1,
color: Colors.black12.withOpacity(.08))
],
borderRadius: BorderRadius.circular(50)
.copyWith(topRight: Radius.circular(0)),
gradient: LinearGradient(colors: [
Colors.blue,
Colors.purple,
])),
child: Text(
'Sign In',
style: TextStyle(
color: Colors.white70, fontSize: 14, fontWeight: FontWeight.w700),
),
),
);
}
// Beautiful flutter login screen ui design
Widget registerButton() {
return GestureDetector(
onTap: () {
ScaffoldMessenger.of(context)
.showSnackBar(SnackBar(content: Text('Register clicked')));
},
child: Container(
alignment: Alignment.center,
margin: EdgeInsets.symmetric(horizontal: 60).copyWith(bottom: 15),
height: 50,
width: double.infinity,
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
offset: Offset(3, 3),
blurRadius: 4,
spreadRadius: 1,
color: Colors.black12.withOpacity(.08))
],
borderRadius: BorderRadius.circular(50)
.copyWith(topRight: Radius.circular(0)),
gradient: LinearGradient(colors: [
Colors.purple,
Colors.blue,
])),
child: Text(
'Register',
style: TextStyle(
color: Colors.white70, fontSize: 14, fontWeight: FontWeight.w700),
),
),
);
}
}Conclusion
To conclude this tutorial, now you’ve a detailed and in-depth practical knowledge of how to implement the above mentioned beautiful gradient Flutter login screen UI template design. I’d love to have your feedback on this post.
I’d also love to see you visit my other tutorials on Flutter app development and Python programming as well. Thank you for reading this post.
