Flutter Signup UI Page Example Code – Flutter UI 2022

by | Sep 27, 2022 | Flutter, Flutter Login App, Flutter UI / UX, UI UX | 0 comments

In this flutter tutorial, we will learn to design a modern Signup screen UI or Signup Page in Flutter. We are creating Flutter UI Design which is a part of our Flutter Login App. In this flutter ui tutorial, we will not just design but also we will learn to create a custom theme for TextField.

In our previous tutorials, we already learned how to design Flutter Login Screen UI and Welcome Screen UI.So, In this tutorial, I will explain the Signup Screen design UI.

You can watch recent playlist tutorials and all the related tutorials to this.

Watch Youtube tutorial

 

class SignUpScreen extends StatelessWidget {
const SignUpScreen({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: SingleChildScrollView(
child: Container(
padding: const EdgeInsets.all(tDefaultSize),
child: Column(
children: const [
FormHeaderWidget(
image: tWelcomeScreenImage,
title: tSignUpTitle,
subTitle: tSignUpSubTitle,
imageHeight: 0.15,
),
SignUpFormWidget(),
SignUpFooterWidget(),
],
),
),
),
),
);
}
}
import 'package:flutter/material.dart';

class FormHeaderWidget extends StatelessWidget {
const FormHeaderWidget({
Key? key,
this.imageColor,
this.heightBetween,
required this.image,
required this.title,
required this.subTitle,
this.imageHeight = 0.2,
this.textAlign,
this.crossAxisAlignment = CrossAxisAlignment.start,
}) : super(key: key);

//Variables -- Declared in Constructor
final Color? imageColor;
final double imageHeight;
final double? heightBetween;
final String image, title, subTitle;
final CrossAxisAlignment crossAxisAlignment;
final TextAlign? textAlign;

@override
Widget build(BuildContext context) {
final size = MediaQuery.of(context).size;

return Column(
crossAxisAlignment: crossAxisAlignment,
children: [
Image(image: AssetImage(image), color: imageColor, height: size.height * imageHeight),
SizedBox(height: heightBetween),
Text(title, style: Theme.of(context).textTheme.headline1),
Text(subTitle, textAlign: textAlign, style: Theme.of(context).textTheme.bodyText1),
],
);
}
}
class SignUpFormWidget extends StatelessWidget {
const SignUpFormWidget({
Key? key,
}) : super(key: key);

@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.symmetric(vertical: tFormHeight - 10),
child: Form(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
TextFormField(
decoration: const InputDecoration(
label: Text(tFullName),
prefixIcon: Icon(Icons.person_outline_rounded)),
),
const SizedBox(height: tFormHeight - 20),
TextFormField(
decoration: const InputDecoration(
label: Text(tEmail), prefixIcon: Icon(Icons.email_outlined)),
),
const SizedBox(height: tFormHeight - 20),
TextFormField(
decoration: const InputDecoration(
label: Text(tPhoneNo), prefixIcon: Icon(Icons.numbers)),
),
const SizedBox(height: tFormHeight - 20),
TextFormField(
decoration: const InputDecoration(
label: Text(tPassword), prefixIcon: Icon(Icons.fingerprint)),
),
const SizedBox(height: tFormHeight - 10),
SizedBox(
width: double.infinity,
child: ElevatedButton(
onPressed: () {},
child: Text(tSignup.toUpperCase()),
),
)
],
),
),
);
}
}
class SignUpFooterWidget extends StatelessWidget {
const SignUpFooterWidget({
Key? key,
}) : super(key: key);

@override
Widget build(BuildContext context) {
return Column(
children: [
const Text("OR"),
SizedBox(
width: double.infinity,
child: OutlinedButton.icon(
onPressed: () {},
icon: const Image(
image: AssetImage(tGoogleLogoImage),
width: 20.0,
),
label: Text(tSignInWithGoogle.toUpperCase()),
),
),
TextButton(
onPressed: () {},
child: Text.rich(TextSpan(children: [
TextSpan(
text: tAlreadyHaveAnAccount,
style: Theme.of(context).textTheme.bodyText1,
),
TextSpan(text: tLogin.toUpperCase())
])),
)
],
);
}
}
//Use this inside main Theme to call Light or dark Modes
inputDecorationTheme: TTextFormFieldTheme.lightInputDecorationTheme,

class TTextFormFieldTheme { TTextFormFieldTheme._(); static InputDecorationTheme lightInputDecorationTheme = const InputDecorationTheme( border: OutlineInputBorder(), prefixIconColor: tSecondaryColor, floatingLabelStyle: TextStyle(color: tSecondaryColor), focusedBorder: OutlineInputBorder( borderSide: BorderSide(width: 2, color: tSecondaryColor), ), ); static InputDecorationTheme darkInputDecorationTheme = const InputDecorationTheme( border: OutlineInputBorder(), prefixIconColor: tPrimaryColor, floatingLabelStyle: TextStyle(color: tPrimaryColor), focusedBorder: OutlineInputBorder( borderSide: BorderSide(width: 2, color: tPrimaryColor), ), ); }

CODING with T

🚀 Supercharge your Flutter skills! Subscribe to my YouTube channel now for mind-blowing coding insights, expert tips, and exclusive content. Don’t miss out!

COURSES

Flutter E Commerce App Modern and latest
Flutter Login App UI Source Code - Flutter Complete App - Flutter App Design - Flutter App 2023 - Complete Flutter App 2023
Learn flutter from scratch in 4 hours - Flutter Crash Course - Coding with T

Latest Tutorial

How to create a Custom Appbar in flutter. Custom Appbar Design. Flutter App Design
How to create a Custom Shape in Flutter. Flutter E Commerce app Design. Ecommerce app design Flutter. Flutter clippath tutorial
Bottom Navigation bar in Flutter. Flutter Material 3 bottom navigation bar. How to design background color of Flutter bottom navigation bar. Flutter ecommerce app design