In this article, we will be implementing a beautiful signup flutter form UI design, we will be using beautiful and important widgets in it like, flutter textfield widgets, flutter gradient containers, flutter custom checkbox, flutter row widgets, flutter column widgets, flutter text widgets and many more to make the UI of our signup page more attractive. Before we get to that, if you want a complete flutter setup then feel free to click here. Let’s begin creating the beautiful registration UI in flutter.
Implementation
Let’s now begin the implementation of this form design design in flutter.
Gradient Background Color
Container( height: double.infinity, width: double.infinity, alignment: Alignment.center, decoration: BoxDecoration( gradient: LinearGradient( colors: [Colors.pink.shade200, Colors.pink.shade900])),)
We have used a container in the body of scaffold and gave the container a gradient color using the box decoration class, let’s see it now:
Title Text
Align( alignment: Alignment.topRight, child: Container( height: 200, width: 300, decoration: BoxDecoration( gradient: LinearGradient(colors: [ Colors.pink.shade100, Colors.pink.shade900 ]), boxShadow: [ BoxShadow( blurRadius: 4, spreadRadius: 3, color: Colors.black12) ], borderRadius: BorderRadius.only( topLeft: Radius.circular(200), bottomRight: Radius.circular(200))), child: Padding( padding: EdgeInsets.only(bottom: 25, left: 25), child: Row( crossAxisAlignment: CrossAxisAlignment.end, children: [ Text( 'Let\'s', style: TextStyle( fontSize: 30, fontWeight: FontWeight.bold, color: Colors.white, shadows: [ Shadow( color: Colors.black45, offset: Offset(1, 1), blurRadius: 5) ]), ), Text( ' Register', style: TextStyle( fontSize: 30, fontWeight: FontWeight.bold, color: Colors.pink.shade600, shadows: [ Shadow( color: Colors.black45, offset: Offset(1, 1), blurRadius: 5) ]), ), ], ), ), ), ),
We have used a container and gave it a border radius to make some of the edges rounded and as a result, we got a beautiful shape like shown in the image above. I also have given it a gradient color and a shadow to the container. Providing the container with a row widget child, inside row, we have used text widgets.
Username And Email Flutter Textfields
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) .copyWith(bottomRight: Radius.circular(0)), borderSide: BorderSide(color: Colors.white38)), focusedBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(100) .copyWith(bottomRight: Radius.circular(0)), borderSide: BorderSide(color: Colors.white70))), ), ),
I have used flutter textfields for username and email fields. I have provided the textfield with the prefix icon which you can see in left side of the fields. I also have used a hint text property which is the text that you see by default, but if you start typing something in that field then it disappears until the textfield is completely empty.
Password And Confirm Password Textfields
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)
.copyWith(bottomRight: Radius.circular(0)),
borderSide: BorderSide(color: Colors.white38)),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(100)
.copyWith(bottomRight: Radius.circular(0)),
borderSide: BorderSide(color: Colors.white70))),
),
),
As you can see, it is implemented with same textfield properties like we have implemented our username and email flutter textfields. But in these fields, we have implemented a suffix icon as well, which you can see in the end of both fields, by tapping on them you can choose whether to see the password or not. By default, the password text is hidden but tapping on that icon will make it visible, you can tap on it for hiding it again.
Flutter Custom Checkbox Containers
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 have used containers for making custom checkboxes in flutter, we have wrapped both of these two containers with their own gesture detector class. We have implemented a logic to show a small filled container inside the parent container, only when it is clicked and remove the filled container from other one if it is showing.
Flutter Signup Container Custom Button
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)
.copyWith(bottomRight: Radius.circular(0)),
gradient: LinearGradient(colors: [
Colors.pink.shade200,
Colors.pink.shade900
])),
child: Text('Signup',
style: TextStyle(
color: Colors.white.withOpacity(.8),
fontSize: 15,
fontWeight: FontWeight.bold)),
),
),
I have used a container, given it a gradient color and used border radius to make the edges of the container rounded except the bottom right one. I also have implemented a shadow and have used a text widget inside the container and have made the text position centered. The container is wrapped with gesture detector class so now it is clickable, means we can trigger some actions after clicking it. We can specify that actions/ functions in the ontap constructor of the gesture detector class or we can also use its other constructors like on long press etc.
Flutter Custom Login Button
We have implemented it in the same way as we have implemented the signup custom buttom. In this one, we just have used a white border and have removed the color of the container which makes it looks like a container with transparent background. Congrats for making it to the end, we have implemented our flutter signup ui design. Below is the complete source code for this 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 Beautiful Registration Form',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.pink,
accentColor: Colors.pink,
primaryColor: Colors.pink,
focusColor: Colors.pink,
cursorColor: Colors.pink),
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.pink.shade200, Colors.pink.shade900])),
child: SingleChildScrollView(
child: Column(
children: [
Align(
alignment: Alignment.topRight,
child: Container(
height: 200,
width: 300,
decoration: BoxDecoration(
gradient: LinearGradient(colors: [
Colors.pink.shade100,
Colors.pink.shade900
]),
boxShadow: [
BoxShadow(
blurRadius: 4,
spreadRadius: 3,
color: Colors.black12)
],
borderRadius: BorderRadius.only(
topLeft: Radius.circular(200),
bottomRight: Radius.circular(200))),
child: Padding(
padding: EdgeInsets.only(bottom: 25, left: 25),
child: Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text(
'Let\'s',
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.bold,
color: Colors.white,
shadows: [
Shadow(
color: Colors.black45,
offset: Offset(1, 1),
blurRadius: 5)
]),
),
Text(
' Register',
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.bold,
color: Colors.pink.shade600,
shadows: [
Shadow(
color: Colors.black45,
offset: Offset(1, 1),
blurRadius: 5)
]),
),
],
),
),
),
),
SizedBox(
height: 40,
),
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)
.copyWith(bottomRight: Radius.circular(0)),
borderSide: BorderSide(color: Colors.white38)),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(100)
.copyWith(bottomRight: Radius.circular(0)),
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)
.copyWith(bottomRight: Radius.circular(0)),
borderSide: BorderSide(color: Colors.white38)),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(100)
.copyWith(bottomRight: Radius.circular(0)),
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)
.copyWith(bottomRight: Radius.circular(0)),
borderSide: BorderSide(color: Colors.white38)),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(100)
.copyWith(bottomRight: Radius.circular(0)),
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)
.copyWith(bottomRight: Radius.circular(0)),
borderSide: BorderSide(color: Colors.white38)),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(100)
.copyWith(bottomRight: Radius.circular(0)),
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)
.copyWith(bottomRight: Radius.circular(0)),
gradient: LinearGradient(colors: [
Colors.pink.shade200,
Colors.pink.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)
.copyWith(bottomRight: Radius.circular(0)),
),
child: Text('Login',
style: TextStyle(
color: Colors.white.withOpacity(.8),
fontSize: 15,
fontWeight: FontWeight.bold)),
),
SizedBox(
height: 20,
)
],
),
),
),
),
);
}
}Note:
That concludes the write-up of this article. Try implementing this in your program and share your results with us! We will be looking forward at how you have used this in your flutter app. We keen to see you in our next article where we will go into other interesting flutter widgets. Thanks for reading.
Flutter app articles you might like to read: beautiful gradient login UI, Dart Vs JavaScript, flutter login UI form, flutter basics for beginners, explanation of widgets in flutter, flutter architecture, flutter vs native, flutter sliverappbar customization, mobile app marketing tips, flutter bottom navigation bar, flutter appbar actions, flutter appbar title center, why learn react native framework, react native jobs, react native elements, unique flutter development.
You might also like:
Flutter Textfield Align Center With Example-2022 Guide
How To Change Flutter Textfield Color-2022 Guide
Flutter App Development Cookbook: Over 100 Techniques And Solutions For Hybrid App Development
How to Choose the Right React Native Elements for Your Next App- 2022 Guide
Why Should I learn React Native Framework In 2022
Flutter App Development In 2022: Future of Mobile App Development?
Flutter App Development In 2022: Future of Mobile App Development?
How to make your first app with flutter?
Hero Animations In Flutter App With Example-Beautiful Flutter Animations In Dart Language
Flutter Vs Android Studio: Which Is Better For You In 2022?
Flutter App Framework: The Future of Mobile App Development 2022?
Top Benefits Of Using Flutter Mobile App Development In 2022
How To Customize Flutter Container Border? 2022 Guide
Top Secrets About Flutter Development Kit-2022 Guide
Beautiful Bottom Navigation Bar In Flutter App-Android And Flutter IOS-Dart Flutter
ListView Builder In Flutter Apps
How To Design Beautiful AppBar in Flutter
How To Use Rows In Flutter Apps
What’s New in Flutter 2.10 release?
How To Use Columns In Flutter Apps
How To Use Beautiful Lottie Animations In Flutter App
Flutter Range Slider Beautiful Customization With Example | Syncfusion
Flutter Carousel Slider Beautiful Customization With Example
Flutter Glassmorphism Login UI Template With Source Code
Hero Animations In Flutter App With Example-Beautiful Flutter Animations In Dart Language
