In this article, we will be creating a beautiful signup flutter form UI design, we will be using flutter textfield widgets, flutter custom check box in flutter signup ui, flutter column widgets, flutter row widgets, flutter gradient color, flutter text widgets, flutter gradient containers and much more to make the UI looks more attractive.
The widgets that we will be using in this signup flutter form UI design are all discussed in detail in the previous articles, so if you want, then you can check them.
Implementation of Flutter Signup UI Design
Let’s start implementing our design step by step, let’s start with background color.
Background Color
SafeArea( child: Scaffold( body: Container( height: double.infinity, width: double.infinity, decoration: BoxDecoration( gradient: LinearGradient( colors: [Colors.orange.shade200, Colors.orange.shade900])), ), ), )
We have used a container in the body constructor of the Flutter scaffold, using the gradient constructor of the box decoration class, we have given it a linear gradient or orange color with different shades. Let’s see how the background looks now:
Title Text
We will be using a title text named ‘Sign Me Up’, that will be placed above. Let’s check the code for implementing it:
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( ' Me', style: TextStyle( fontSize: 30, fontWeight: FontWeight.bold, color: Colors.orange.shade700, shadows: [ Shadow( color: Colors.black45, offset: Offset(1, 1), blurRadius: 5) ]), ), Text( ' Up', style: TextStyle( fontSize: 30, fontWeight: FontWeight.bold, color: Colors.white, shadows: [ Shadow( color: Colors.black45, offset: Offset(1, 1), blurRadius: 5) ]), ) ], )
We first used a row widget. Inside it, we have used three text widgets. The text ‘sign’ comes in the first one, ‘me’ in the second one, and ‘up’ in the last flutter text widget. We have also customized our text widget by giving it color, size, shadow, etc. Let’s see how it looks:
Username And Email Textfields
Let’s now add flutter text fields, we will use username, email, password, and confirm password textfield. Let’s see the code for implementing it:
TextField( style: TextStyle(color: Colors.white, fontSize: 14.5), decoration: InputDecoration( prefixIconConstraints: BoxConstraints(minWidth: 45), prefixIcon: Icon( Icons.person, color: Colors.white70, size: 22, ), border: InputBorder.none, hintText: 'Enter Username', hintStyle: TextStyle(color: Colors.white60, fontSize: 14.5), enabledBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(100), borderSide: BorderSide(color: Colors.white38)), focusedBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(100), borderSide: BorderSide(color: Colors.white70))), )
We have used a username textfield and we have given it a hint text and hint style. This is the text that we see by default when we haven’t added our text in the text field.
We have also used the enabled border and focused border constructor to decorate the borders of the text fields. We have made the border rounded and of white color. We also have used a prefix icon which is the icon that is shown before the hint text or the text that we will add after clicking on the textfield.
The email textfield is also customized using the same properties, so we only have used the username textfield code above. Don’t worry, the whole screen’s source code will be provided in the end. Let’s see both the text fields now:
Password And Confirm Password Textfields
Password and confirm password text fields are also customized using the same properties which were used for username and email fields.
In addition, we have used the suffix property, by using it, we have specified a visibility icon that we can see at the end of both passwords and confirm password text fields. It is used to show whether the user wants to see the password while typing it or not. By clicking it, the password text will be visible, clicking it again will hide it again.
Of course, we have to implement a simple logic for this, which we have already implemented in our source code. The icon will also change depending on whether the password is shown or not. Let’s see our password and confirm the password text fields:
Flutter Custom Check Box
We have created our own custom options to let the user select whether to select a male or a female option. Let’s see the code for its implementation:
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))
],
),
)
],
)
We can see that we have used Boolean values for this, we have implemented some logic, so that whenever one option is selected, the other gets unselected automatically.
Flutter Gradient Button Container
We have used a container and customized it, we have given it a gradient background color, a child text widget, a shadow, and a circular border-radius, we also have wrapped it inside a flutter gesture detector widget so its clickable now and we can perform actions by clicking it. Let’s check the code out:
GestureDetector(
onTap: () {},
child: Container(
height: 53,
width: double.infinity,
margin: EdgeInsets.symmetric(horizontal: 30),
alignment: Alignment.center,
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
blurRadius: 4,
color: Colors.black12.withOpacity(.2),
offset: Offset(2, 2))
],
borderRadius: BorderRadius.circular(100),
gradient: LinearGradient(colors: [
Colors.orange.shade200,
Colors.orange.shade900
])),
child: Text('Signup',
style: TextStyle(
color: Colors.white.withOpacity(.8),
fontSize: 15,
fontWeight: FontWeight.bold)),
),
)
This is the gradient container that works just like a button, which means it’s clickable and we have done our customization to this container which you can see in the above code.
Flutter Login Container Button
We have customized our login button by using the properties that we have used for the signup button. But removing and adding some properties like removing the shadow and background color and adding the border color to it.
Congrats, we have successfully developed our registration form UI in the Flutter app, let’s now look at the complete source code.
Flutter Signup Form 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: 'Flutter Beautiful Registration Form',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.orange,
accentColor: Colors.orange,
primaryColor: Colors.orange,
focusColor: Colors.orange,
cursorColor: Colors.orange),
home: Homepage(),
);
}
}
class Homepage extends StatefulWidget {
const Homepage({Key? key}) : super(key: key);
@override
State<Homepage> createState() => _HomepageState();
}
class _HomepageState extends State<Homepage> {
bool maleSelected = false;
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.orange.shade200, Colors.orange.shade900])),
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
SizedBox(
height: 50,
),
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(
' Me',
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.bold,
color: Colors.orange.shade700,
shadows: [
Shadow(
color: Colors.black45,
offset: Offset(1, 1),
blurRadius: 5)
]),
),
Text(
' Up',
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.bold,
color: Colors.white,
shadows: [
Shadow(
color: Colors.black45,
offset: Offset(1, 1),
blurRadius: 5)
]),
)
],
),
SizedBox(
height: 50,
),
Padding(
padding:
EdgeInsets.symmetric(horizontal: 30).copyWith(bottom: 10),
child: TextField(
style: TextStyle(color: Colors.white, fontSize: 14.5),
decoration: InputDecoration(
prefixIconConstraints: BoxConstraints(minWidth: 45),
prefixIcon: Icon(
Icons.person,
color: Colors.white70,
size: 22,
),
border: InputBorder.none,
hintText: 'Enter Username',
hintStyle:
TextStyle(color: Colors.white60, fontSize: 14.5),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(100),
borderSide: BorderSide(color: Colors.white38)),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(100),
borderSide: BorderSide(color: Colors.white70))),
),
),
Padding(
padding:
EdgeInsets.symmetric(horizontal: 30).copyWith(bottom: 10),
child: TextField(
style: TextStyle(color: Colors.white, fontSize: 14.5),
decoration: InputDecoration(
prefixIconConstraints: BoxConstraints(minWidth: 45),
prefixIcon: Icon(
Icons.email,
color: Colors.white70,
size: 22,
),
border: InputBorder.none,
hintText: 'Enter Email',
hintStyle:
TextStyle(color: Colors.white60, fontSize: 14.5),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(100),
borderSide: BorderSide(color: Colors.white38)),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(100),
borderSide: BorderSide(color: Colors.white70))),
),
),
Padding(
padding:
EdgeInsets.symmetric(horizontal: 30).copyWith(bottom: 10),
child: TextField(
style: TextStyle(color: Colors.white, fontSize: 14.5),
obscureText: isPasswordVisible ? false : true,
decoration: InputDecoration(
prefixIconConstraints: BoxConstraints(minWidth: 45),
prefixIcon: Icon(
Icons.lock,
color: Colors.white70,
size: 22,
),
suffixIconConstraints:
BoxConstraints(minWidth: 45, maxWidth: 46),
suffixIcon: GestureDetector(
onTap: () {
setState(() {
isPasswordVisible = !isPasswordVisible;
});
},
child: Icon(
isPasswordVisible
? Icons.visibility
: Icons.visibility_off,
color: Colors.white70,
size: 22,
),
),
border: InputBorder.none,
hintText: 'Enter Password',
hintStyle:
TextStyle(color: Colors.white60, fontSize: 14.5),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(100),
borderSide: BorderSide(color: Colors.white38)),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(100),
borderSide: BorderSide(color: Colors.white70))),
),
),
Padding(
padding:
EdgeInsets.symmetric(horizontal: 30).copyWith(bottom: 10),
child: TextField(
style: TextStyle(color: Colors.white, fontSize: 14.5),
obscureText: isConfirmPasswordVisible ? false : true,
decoration: InputDecoration(
prefixIconConstraints: BoxConstraints(minWidth: 45),
prefixIcon: Icon(
Icons.lock,
color: Colors.white70,
size: 22,
),
suffixIconConstraints:
BoxConstraints(minWidth: 45, maxWidth: 46),
suffixIcon: GestureDetector(
onTap: () {
setState(() {
isConfirmPasswordVisible =
!isConfirmPasswordVisible;
});
},
child: Icon(
isConfirmPasswordVisible
? Icons.visibility
: Icons.visibility_off,
color: Colors.white70,
size: 22,
),
),
border: InputBorder.none,
hintText: 'Confirm Password',
hintStyle:
TextStyle(color: Colors.white60, fontSize: 14.5),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(100),
borderSide: BorderSide(color: Colors.white38)),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(100),
borderSide: BorderSide(color: Colors.white70))),
),
),
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,
),
GestureDetector(
onTap: () {},
child: Container(
height: 53,
width: double.infinity,
margin: EdgeInsets.symmetric(horizontal: 30),
alignment: Alignment.center,
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
blurRadius: 4,
color: Colors.black12.withOpacity(.2),
offset: Offset(2, 2))
],
borderRadius: BorderRadius.circular(100),
gradient: LinearGradient(colors: [
Colors.orange.shade200,
Colors.orange.shade900
])),
child: Text('Signup',
style: TextStyle(
color: Colors.white.withOpacity(.8),
fontSize: 15,
fontWeight: FontWeight.bold)),
),
),
SizedBox(
height: 50,
),
Text('Already have an account?',
style: TextStyle(color: Colors.white70, fontSize: 13)),
SizedBox(
height: 20,
),
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,
)
],
),
),
),
),
);
}
}Conclusion
Hope you now have a complete understanding of how to implement this eye-catching Flutter Signup UI Design. We’ve written detailed articles on the widgets that are used to create this beautiful design, so do check them out as well.
We’d also be glad to see you visit our other tutorials on Flutter app development and Python programming. Thank you for reading this one.
