In this tutorial, we’ll learn how to create a beautiful Flutter login and registration screen design. The complete source code of the mentioned Flutter login and registration screen template will be provided in the end.
Outline
- Introduction: Flutter Login and Registration Screen Design
- Flutter Login and Registration Screen UI Design Source Code
- Conclusion
Introduction: Flutter Login And Registration Screen Design
We’ve created this beautiful Flutter login and registration screen template design by using multiple Flutter widgets. We’ve created a toggle which can be used to show login or registration form.
Widgets that are used in creating this amazing Flutter login and registration template UI design are listed below:
- Flutter Column Widget
- Flutter Row Widget
- Flutter Gradient Container Widget
- Flutter Textfield Widget
- Flutter Gesture Detector Widget
- Flutter Inkwell Widget
- Flutter Text Widget
- Flutter Single Child Scroll View Widget
- Flutter Padding Widget
- Flutter Snackbar Widget
- Flutter Container Widget
I’ve written detailed articles on the widgets listed above, you can check them out using the menu bar or search box of this site.
The complete source code of this beautiful Flutter login and registration screen template is available in the below section.
Try to understand how every Flutter widget is doing its role in this beautiful login and registration screen UI design and implement this design from scratch.
You can paste this code inside your main file. No additional packages required. Hope you’ll like it. Also, try to customize it according to your set of requirements.
Flutter Login and Registration Screen UI Design 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(
title: 'Flutter Login and Registration Screen UI',
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();
}
// flutter login and registration screen template
class _HomepageState extends State<Homepage> {
bool isLoginSelected = true;
bool maleSelected = true;
bool femaleSelected = false;
bool isPasswordVisible = false;
bool isConfirmPasswordVisible = 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.shade200, Colors.purple.shade900])),
child: SingleChildScrollView(
child: Column(
children: [
topBlock(),
SizedBox(
height: 30,
),
toggleButton(),
isLoginSelected ? SizedBox() : usernameField(),
emailField(),
passwordField(),
isLoginSelected ? SizedBox() : confirmPasswordField(),
!isLoginSelected ? SizedBox() : forgotPassword(),
isLoginSelected
? SizedBox()
: Container(
margin: EdgeInsets.symmetric(horizontal: 80)
.copyWith(top: 20),
alignment: Alignment.center,
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
offset: Offset(4, 4),
blurRadius: 5,
spreadRadius: 0,
color: Colors.black26)
],
borderRadius: BorderRadius.circular(50)
.copyWith(topLeft: Radius.circular(0)),
gradient: LinearGradient(colors: [
Colors.purple.shade200,
Colors.purple.shade900
])),
child: Padding(
padding: EdgeInsets.only(top: 15, bottom: 15),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
GestureDetector(
onTap: () {
setState(() {
maleSelected = true;
femaleSelected = false;
});
},
child: Row(
children: [
Container(
height: 20,
width: 20,
alignment: Alignment.center,
margin: EdgeInsets.only(right: 10),
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(
color: Colors.white60)),
child: maleSelected
? Container(
margin: EdgeInsets.all(4),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.white70),
)
: SizedBox()),
Text('Male',
style: TextStyle(
color: Colors.white70,
fontSize: 14.5))
],
),
),
GestureDetector(
onTap: () {
setState(() {
femaleSelected = true;
maleSelected = false;
});
},
child: Row(
children: [
Container(
height: 20,
width: 20,
alignment: Alignment.center,
margin: EdgeInsets.only(right: 10),
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(
color: Colors.white60)),
child: femaleSelected
? Container(
margin: EdgeInsets.all(4),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.white70),
)
: SizedBox()),
Text('Female',
style: TextStyle(
color: Colors.white70,
fontSize: 14.5))
],
),
)
],
),
),
),
SizedBox(
height: 40,
),
button(),
SizedBox(
height: 20,
)
],
),
),
),
),
);
}
// flutter login and registration screen ui template
Widget topBlock() {
return Container(
height: 200,
alignment: Alignment.bottomCenter,
padding: EdgeInsets.only(bottom: 20),
width: double.infinity,
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
offset: Offset(5, 5),
blurRadius: 10,
spreadRadius: 3,
color: Colors.black26)
],
borderRadius: BorderRadius.only(bottomRight: Radius.circular(200)),
gradient: LinearGradient(
colors: [Colors.purple.shade200, Colors.purple.shade900])),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
alignment: Alignment.center,
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 15),
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
offset: Offset(4, 4),
blurRadius: 5,
spreadRadius: 0,
color: Colors.black26)
],
borderRadius: BorderRadius.circular(50).copyWith(
topLeft: Radius.circular(0),
),
gradient: LinearGradient(colors: [
Colors.purple.shade200,
Colors.purple.shade900
])),
child: Text(
isLoginSelected ? 'Login' : 'Signup',
style: TextStyle(
color: Colors.white,
fontSize: 14,
fontWeight: FontWeight.w700),
),
),
],
),
],
),
);
}
// flutter login and registration screen design
Widget usernameField() {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 25).copyWith(top: 10),
child: Container(
alignment: Alignment.centerLeft,
padding: EdgeInsets.symmetric(horizontal: 15, vertical: 10),
height: 53,
width: double.infinity,
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
offset: Offset(4, 4),
blurRadius: 5,
spreadRadius: 0,
color: Colors.black26)
],
borderRadius: BorderRadius.circular(50)
.copyWith(topLeft: Radius.circular(0)),
gradient: LinearGradient(
colors: [Colors.purple.shade200, Colors.purple.shade900])),
child: TextField(
style: TextStyle(color: Colors.white, fontSize: 14),
decoration: InputDecoration(
border: InputBorder.none,
prefixIconConstraints: BoxConstraints(minWidth: 24),
prefixIcon: Padding(
padding: EdgeInsets.only(right: 10),
child: Icon(
Icons.person,
color: Colors.white,
size: 20,
),
),
hintText: 'Enter username',
hintStyle: TextStyle(color: Colors.white, fontSize: 14),
),
),
));
}
Widget emailField() {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 25).copyWith(top: 10),
child: Container(
alignment: Alignment.centerLeft,
padding: EdgeInsets.symmetric(horizontal: 15, vertical: 10),
height: 53,
width: double.infinity,
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
offset: Offset(4, 4),
blurRadius: 5,
spreadRadius: 0,
color: Colors.black26)
],
borderRadius: BorderRadius.circular(50)
.copyWith(topLeft: Radius.circular(0)),
gradient: LinearGradient(
colors: [Colors.purple.shade200, Colors.purple.shade900])),
child: TextField(
style: TextStyle(color: Colors.white, fontSize: 14),
decoration: InputDecoration(
border: InputBorder.none,
prefixIconConstraints: BoxConstraints(minWidth: 24),
prefixIcon: Padding(
padding: EdgeInsets.only(right: 10),
child: Icon(
Icons.email,
color: Colors.white,
size: 20,
),
),
hintText: 'Enter email',
hintStyle: TextStyle(color: Colors.white, fontSize: 14),
),
),
));
}
// flutter login and registration screen ui design
Widget passwordField() {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 25).copyWith(top: 10),
child: Container(
alignment: Alignment.centerLeft,
padding: EdgeInsets.symmetric(horizontal: 15, vertical: 10),
height: 53,
width: double.infinity,
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
offset: Offset(4, 4),
blurRadius: 5,
spreadRadius: 0,
color: Colors.black26)
],
borderRadius: BorderRadius.circular(50)
.copyWith(topLeft: Radius.circular(0)),
gradient: LinearGradient(
colors: [Colors.purple.shade200, Colors.purple.shade900])),
child: TextField(
obscureText: isPasswordVisible ? false : true,
style: TextStyle(color: Colors.white, fontSize: 14),
decoration: InputDecoration(
border: InputBorder.none,
prefixIconConstraints: BoxConstraints(minWidth: 24),
suffixIconConstraints: BoxConstraints(minWidth: 24),
prefixIcon: Padding(
padding: EdgeInsets.only(right: 10),
child: Icon(
Icons.lock,
color: Colors.white,
size: 20,
),
),
suffixIcon: Padding(
padding: EdgeInsets.only(left: 10),
child: GestureDetector(
onTap: () {
setState(() {
isPasswordVisible = !isPasswordVisible;
});
},
child: Icon(
isPasswordVisible ? Icons.visibility : Icons.visibility_off,
color: Colors.white,
size: 20,
),
),
),
hintText: 'Enter password',
hintStyle: TextStyle(color: Colors.white, fontSize: 14),
),
),
));
}
// flutter login and registration screen template design
Widget confirmPasswordField() {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 25).copyWith(top: 10),
child: Container(
alignment: Alignment.centerLeft,
padding: EdgeInsets.symmetric(horizontal: 15, vertical: 10),
height: 53,
width: double.infinity,
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
offset: Offset(4, 4),
blurRadius: 5,
spreadRadius: 0,
color: Colors.black26)
],
borderRadius: BorderRadius.circular(50)
.copyWith(topLeft: Radius.circular(0)),
gradient: LinearGradient(
colors: [Colors.purple.shade200, Colors.purple.shade900])),
child: TextField(
obscureText: isConfirmPasswordVisible ? false : true,
style: TextStyle(color: Colors.white, fontSize: 14),
decoration: InputDecoration(
border: InputBorder.none,
prefixIconConstraints: BoxConstraints(minWidth: 24),
suffixIconConstraints: BoxConstraints(minWidth: 24),
prefixIcon: Padding(
padding: EdgeInsets.only(right: 10),
child: Icon(
Icons.lock,
color: Colors.white,
size: 20,
),
),
suffixIcon: Padding(
padding: EdgeInsets.only(left: 10),
child: GestureDetector(
onTap: () {
setState(() {
isConfirmPasswordVisible = !isConfirmPasswordVisible;
});
},
child: Icon(
isConfirmPasswordVisible
? Icons.visibility
: Icons.visibility_off,
color: Colors.white,
size: 20,
),
),
),
hintText: 'Confirm password',
hintStyle: TextStyle(color: Colors.white, fontSize: 14),
),
),
));
}
Widget button() {
return GestureDetector(
onTap: () {
ScaffoldMessenger.of(context)
.showSnackBar(SnackBar(content: Text('Clicked')));
},
child: Container(
height: 53,
width: double.infinity,
margin: EdgeInsets.symmetric(horizontal: 30),
alignment: Alignment.center,
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
blurRadius: 4, color: Colors.black26, offset: Offset(5, 5))
],
borderRadius: BorderRadius.circular(100)
.copyWith(topLeft: Radius.circular(0)),
gradient: LinearGradient(
colors: [Colors.purple.shade200, Colors.purple.shade900])),
child: Text(isLoginSelected ? 'Login' : 'Signup',
style: TextStyle(
color: Colors.white.withOpacity(.8),
fontSize: 15,
fontWeight: FontWeight.bold)),
),
);
}
// flutter login and registration screen template design ui
Widget toggleButton() {
return Align(
alignment: Alignment.topCenter,
child: Container(
margin: EdgeInsets.only(bottom: 10),
height: 40,
width: 150,
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
offset: Offset(4, 4),
blurRadius: 5,
spreadRadius: 0,
color: Colors.black26)
],
borderRadius:
BorderRadius.circular(50).copyWith(topLeft: Radius.circular(0)),
gradient: LinearGradient(
colors: [Colors.purple.shade200, Colors.purple.shade900])),
child: Row(
// flutter login and registration screen source code design UI
children: [
!isLoginSelected
? Expanded(
child: Center(
child: GestureDetector(
onTap: () {
setState(() {
print('tap');
isLoginSelected = true;
});
},
child: Text(
'Login',
style: TextStyle(
color: Colors.white,
fontSize: 12,
fontWeight: FontWeight.w500),
),
),
))
: Expanded(
child: Container(
alignment: Alignment.center,
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
offset: Offset(4, 4),
blurRadius: 5,
spreadRadius: 0,
color: Colors.black26)
],
borderRadius: BorderRadius.circular(50).copyWith(
topLeft: Radius.circular(0),
),
gradient: LinearGradient(colors: [
Colors.purple.shade200,
Colors.purple.shade900
])),
child: Text(
'Login',
style: TextStyle(
color: Colors.white,
fontSize: 12,
fontWeight: FontWeight.w500),
),
)),
isLoginSelected
? Expanded(
child: Center(
child: TextButton(
onPressed: () {
setState(() {
print('tap');
isLoginSelected = false;
});
},
child: Text(
'Signup',
style: TextStyle(
color: Colors.white,
fontSize: 12,
fontWeight: FontWeight.w500),
),
),
))
: Expanded(
child: Container(
alignment: Alignment.center,
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
offset: Offset(4, 4),
blurRadius: 5,
spreadRadius: 0,
color: Colors.black26)
],
borderRadius: BorderRadius.circular(50).copyWith(
topLeft: Radius.circular(0),
),
gradient: LinearGradient(colors: [
Colors.purple.shade200,
Colors.purple.shade900
])),
child: Text(
'Sign Up',
style: TextStyle(
color: Colors.white,
fontSize: 12,
fontWeight: FontWeight.w500),
),
))
],
),
),
);
}
// flutter login and registration screen design code
Widget forgotPassword() {
return Align(
alignment: Alignment.centerRight,
child: Padding(
padding: const EdgeInsets.only(top: 10, right: 30),
child: InkWell(
onTap: () {
// can navigate to other screen or perform some other action
},
child: Text(
'Forgot password?',
style: TextStyle(
color: Colors.white.withOpacity(.9),
fontSize: 12,
fontWeight: FontWeight.w700),
),
),
),
);
}
}Conclusion
To conclude this tutorial, hope you now have a complete and in-depth practical knowledge of how to create this beautiful Flutter login and registration screen UI design. I’d be looking forward 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.
You might also like:
Design Beautiful Flutter Login And Registration Template [Free Source Code]
Beautiful Flutter Login And Registration UI Design [Free Source Code]
Design Beautiful Flutter Login And Registration Source Code
How To Change Flutter OutlinedButton Elevation [Easy Flutter Guide]
How To Set Flutter Textfield Expand Height [Flutter Easy Guide]
Design Beautiful Flutter Signup Page UI Design [Free Source Code]
Design Beautiful Flutter Login And Registration Template [Free Source Code]
Signup Flutter Form UI Design-Beautiful Flutter UI Template
How To Set Flutter OutlinedButton Rounded Corners [Easy Flutter Guide]
How To Change Flutter OutlinedButton Border Radius [Flutter Easy Guide]
