In this tutorial, we’ll learn how to create this beautiful Flutter signup page UI design. The complete source code of the mentioned Flutter signup page screen will be provided in the end.
Outline
- Introduction: Flutter Signup Page UI Design
- Beautiful Flutter Signup Page UI Source Code
- Conclusion
Introduction: Flutter Signup Page UI Design
We’ve created this beautiful Flutter signup page design by using multiple Flutter widgets.
Widgets that are used in creating this amazing Flutter signup page UI design are listed below:
- Flutter Column Widget
- Flutter Snackbar Widget
- Flutter Row Widget
- Flutter Text Widget
- Flutter Single Child Scroll View Widget
- Flutter Padding Widget
- Flutter Textfield Widget
- Flutter Gesture Detector Widget
- Flutter Inkwell Widget
- Flutter Container Widget
- Flutter Gradient Container Widget
I’ve written detailed articles on the widgets listed above, you can check them out using the search box or menu bar of this site.
Source code for this beautiful Flutter signup page is given in the below section.
Try to understand how every Flutter widget is doing its role in this beautiful signup template 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.
Beautiful Flutter Signup Page UI 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: 'Beautiful Flutter Signup Page Template',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.red,
accentColor: Colors.red,
primaryColor: Colors.red,
focusColor: Colors.red,
cursorColor: Colors.red),
home: Homepage(),
);
}
}
// flutter signup page ui design
class Homepage extends StatefulWidget {
const Homepage({Key? key}) : super(key: key);
@override
State<Homepage> createState() => _HomepageState();
}
class _HomepageState extends State<Homepage> {
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,
alignment: Alignment.center,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.red.shade200, Colors.red.shade900])),
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
SizedBox(
height: 100,
),
titleText(),
SizedBox(
height: 30,
),
usernameField(),
emailField(),
passwordField(),
confirmPasswordField(),
SizedBox(
height: 30,
),
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,
),
signUpButton(),
SizedBox(
height: 53,
),
Text('Already have an account?',
style: TextStyle(color: Colors.white70, fontSize: 13)),
SizedBox(
height: 20,
),
InkWell(
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(
border: Border.all(color: Colors.white60),
borderRadius: BorderRadius.circular(100),
),
child: Text('Login',
style: TextStyle(
color: Colors.white.withOpacity(.8),
fontSize: 15,
fontWeight: FontWeight.bold)),
),
),
SizedBox(
height: 20,
)
],
),
),
),
),
);
}
// beautiful flutter signup page ui design
Widget titleText() {
return Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Sign',
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.bold,
color: Colors.white,
shadows: [
Shadow(
color: Colors.black45, offset: Offset(1, 1), blurRadius: 5)
]),
),
Text(
' Up',
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.bold,
color: Colors.red.shade700,
shadows: [
Shadow(
color: Colors.black45, offset: Offset(1, 1), blurRadius: 5)
]),
),
],
);
}
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),
gradient: LinearGradient(
colors: [Colors.red.shade200, Colors.red.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),
),
),
));
}
// amazing flutter signup page ui design
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),
gradient: LinearGradient(
colors: [Colors.red.shade200, Colors.red.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),
),
),
));
}
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),
gradient: LinearGradient(
colors: [Colors.red.shade200, Colors.red.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),
),
),
));
}
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),
gradient: LinearGradient(
colors: [Colors.red.shade200, Colors.red.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),
),
),
));
}
// flutter signup page design template
Widget signUpButton() {
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),
gradient: LinearGradient(
colors: [Colors.red.shade200, Colors.red.shade900])),
child: Text('Signup',
style: TextStyle(
color: Colors.white.withOpacity(.8),
fontSize: 15,
fontWeight: FontWeight.bold)),
),
);
}
}Conclusion
To conclude this tutorial, hope you now have a complete and in-depth practical knowledge of how to create this beautiful Flutter signup page 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 Source Code
Signup Flutter Form UI Design-Beautiful Flutter UI Template
Beautiful Flutter Login And Registration UI Design [Free Source Code]
How To Set Flutter OutlinedButton Rounded Corners [Easy Flutter Guide]
How To Easily Use Flutter Appbar Tabs [Easy Flutter Guide]
How To Change Flutter OutlinedButton Border Radius [Flutter Easy Guide]
How To Change Flutter OutlinedButton Background Color
Beautiful Flutter Login And Registration Screen UI Design [Free Source Code]
