Flutter Signup Page Design - Signup Page Flutter 2023

In this flutter tutorial, you will learn to design a modern and professional looking Flutter Signup Page.

🎊 E-COMMERCE APP
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

❤️ FLUTTER E-COMMERCE APP PLAYLISTS
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

❤️ SUBSCRIPTIONS
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

COURSES
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

🧑‍💻 RELATED VIDEOS
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

FOLLOW US ON SOCIAL MEDIA
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

CHAPTERS
00:00 Introduction

DETAILS
In the previous tutorials we already learn to design Login page in flutter so, now we are going to design register screen in flutter. It will have a signup form and social signup using Facebook and Google.

Welcome to this exciting Flutter tutorial where you'll take your app's user experience to the next level by designing a modern and professional-looking signup page!

Building upon what you've learned in our previous tutorials, you'll now delve into crafting a registration screen that complements your app's overall design. This Flutter signup page will feature a sleek signup form, ensuring a smooth and intuitive user registration process.

But that's not all! We'll also explore the world of social signup options, allowing users to register using their Facebook and Google accounts. This not only enhances the user experience but also provides a convenient way for users to get started with your app quickly.

By the end of this tutorial, you'll have the skills and knowledge to create a signup page that's not only visually appealing but also offers a seamless registration process, whether through a traditional form or social media accounts. Let's dive in and start designing this modern and user-friendly signup page in Flutter!
#tstore #codingwitht #ecommerceapp #flutter #ui #uidesign

[ghulammurtaza]

So proud of now 😀 for this amazing content 👏
Keep it up 💪

[nishantkharel]

🎯 Key Takeaways for quick navigation:

00:00 📱 *The tutorial focuses on designing a signup screen for a Flutter e-commerce application.*
01:09 📝 *The signup screen will be divided into three parts: design, email verification, and success screen.*
01:56 🧩 *Reusing code from the login screen for the signup screen, including form dividers and social buttons.*
02:10 🛠️ *Organizing the project structure by creating a signup folder and adding a signup screen file.*
03:04 🎨 *Implementing the basic structure of the signup screen using a Scaffold, AppBar, and SingleChildScrollView.*
04:13 📝 *Designing the form layout with titles, spacing, and text fields for user input.*
08:11 ✅ *Implementing a checkbox for terms and conditions, adjusting its style, and handling its state.*
09:46 🎨 *Creating a rich text widget for displaying terms and conditions with varying styles and colors.*
12:59 📲 *Adding a full-width signup button with an ElevatedButton widget.*
13:42 🧩 *Reusing form dividers and social buttons widgets to enhance the overall design.*
14:47 🌈 *Exploring the need for a custom app bar in future sections to improve color and icon customization.*
15:00 🧑‍💻 *Demonstrating the extraction of the signup form into a separate widget for better code organization.*
15:43 🔲 *Separating the terms and conditions checkbox into a distinct widget for improved modularity.*

[Mrlikeandshare]

Until now i start coding lot of things without waiting you thanks a lot

[bell]

developing my dissertation with the help of your videos, thank you a lot, man)))

[bayan]

You're the best thank you much, you're my savior🙏🙏🙏🙏🙏🙏🙏

[technicalfaraz]

Sir how to fix this error

The specific RenderFlex in question is: RenderFlex#f43a7 relayoutBoundary=up13 OVERFLOWING
... parentData: offset=Offset(0.0, 385.0); flex=null; fit=null (can use size)
... constraints: BoxConstraints(0.0<=w<=312.0, 0.0<=h<=Infinity)
... size: Size(312.0, 24.0)
... direction: horizontal
... mainAxisAlignment: start
... mainAxisSize: max
... crossAxisAlignment: center
... textDirection: ltr
... verticalDirection: down

[HafizurRahman-pxyx]

Thank you so much brother. ❤ from Bangladesh

[djamamockejoel]

Thank you for the video. i have purchased the full package. for the widgets theme, you didnt cover the radio button and dropdowbuttom. do you have any video where you cover this widgets?

[isyrafismail]

Hello sir i have been following your tutorial since the beginning. I have issue with the last part of this video which is the back button not visible when applying dark mode. I have already separate the class and remove the dark function...

[seraphimhelenl.rosales]

when will the next vids will be uploaded? im excited to learn from you sir

[Non-Person]

What is the extension u use to estructure the code with the left line?

[AnkitSingh-zbct]

Appreciate your efforts but wanna know how can i create a responsive design bcz some elements are showing overflow error on some devices. Any suggestions?
Thank you 😊

[baber]

Sir why u didn't make custom textformfield?

[Pirth_]

OutlinedButton in my DARK mode doesn't show back button 😖😖

[arshadm]

paypal is declining payment..any help pls

[suhaibahmed]

Sir how to fix this error?

Exception caught by Flutter framework
The following message was thrown:
Could not navigate to initial route.
The requested route name was: "/SignupScreen"
There was no corresponding route in the app, and therefore the initial route specified will be ignored and "/" will be used instead.

[QujuanK]

For future viewers I'm testing on newer and older devices at sametime the Text.rich code block may overflow on older devices if you use a different font from in the video like i did.. in that case i wrapped the Text.rich in a expanded widget:
Expanded(
child: Text.rich(
TextSpan(
children: [
TextSpan(
text: '${TismTexts.iAgreeTo} ',
style: Theme.of(context).textTheme.bodySmall),
TextSpan(text: '${TismTexts.privacyPolicy} ', style:
color: TismColors.primary
)),
TextSpan(
text: '${TismTexts.and} ',
style: Theme.of(context).textTheme.bodySmall),
TextSpan(text: TismTexts.termsOfUse, style:
color: TismColors.primary
)),
],
),
),
),