🎯 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.*
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: Theme.of(context).textTheme.bodyMedium!.apply( color: TismColors.primary )), TextSpan( text: '${TismTexts.and} ', style: Theme.of(context).textTheme.bodySmall), TextSpan(text: TismTexts.termsOfUse, style: Theme.of(context).textTheme.bodyMedium!.apply( color: TismColors.primary )), ], ), ), ),
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?
I have covered these widgets in my crash course. here is the video of radio button: ua-cam.com/video/JLdit0tnwp8/v-deo.htmlsi=Z3TFj4fjIr-Wj7gK and here is the video of dropdown: ua-cam.com/video/6_Azs3fq9O4/v-deo.htmlsi=sSk5j-d0UXCpuMay You can also watch complete crash course: ua-cam.com/play/PL5jb9EteFAODi35jPznP37hnR2sTHOOTU.html&si=MWb_c3m555w4-ZxZ
Does the Form Widget have inbuilt Light - dark mode theme? Because we havent used the dark variable for the TextFields in the Signup Form, still the colour changes on its own.
We have already create the themes of text form fields and buttons. Please check the video ua-cam.com/video/Ct9CrMegezQ/v-deo.html&lc=Ugxuj0-oLojDm7G2GW94AaABAg
To avoid defining isDarkMode every time in the buildContext of each class, an extension to the context class will make the code cleaner: extension ContextExtensionss on BuildContext { /// similar to [MediaQuery.of(context).padding] ThemeData get theme => Theme.of(this); /// Check if dark mode theme is enable bool get isDarkMode => (theme.brightness == Brightness.dark); ... } and easy call context.isDarkMode in each class.
That’s a great suggestion! Using extensions on BuildContext like this is an excellent way to streamline and clean up your code. It simplifies accessing theme properties and enhances readability by allowing you to use context.isDarkMode directly. Thanks for sharing this useful tip! 👍
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...
Assalamualaikum. A humble request to make some complete projects using Riverpod State management library with custom backend like this. Jazak Allah khayer
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
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 😊
I used Poppins as a font. You can also get the Project starter kit for free from codingwitht.com/product/flutter-ecommerce-app-with-firebase/ , containing folder structure, localization support, error handling, utilities, assets, constants, sizes, and customizable themes. It's designed to kickstart your project with essential elements.
Because it's not required. I have already designed my Themes in the Section 1 Theme tutorial. So once we have our own designed theme then we don't have to redo it again and again. Just use simple TextFormField and it will automatically use the theme we assigned earlier.
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. ====================================================================================================
So proud of now 😀 for this amazing content 👏
Keep it up 💪
Thank you so much 😀 Ghulam Murtaza ❤️
@@CodingwithT most welcome bro, can I get this UI Figma/Adobe access please?
🎯 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.*
Thank you for sharing
Until now i start coding lot of things without waiting you thanks a lot
Asalam Aleikum from Somalia. This is what I have been looking for. Jazakalah Kheyr. Following the course and enjoying so far.
Walikum salam, Thank you so much buddy and much blessings
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: Theme.of(context).textTheme.bodyMedium!.apply(
color: TismColors.primary
)),
TextSpan(
text: '${TismTexts.and} ',
style: Theme.of(context).textTheme.bodySmall),
TextSpan(text: TismTexts.termsOfUse, style: Theme.of(context).textTheme.bodyMedium!.apply(
color: TismColors.primary
)),
],
),
),
),
Thank you for your support ☺️
it helped!! thanks
Amazing job, Mr. T!
Thank you
You're the best thank you soooooo much, you're my savior🙏🙏🙏🙏🙏🙏🙏
Happy to help 😄
Awesome tutorial,,.... ❤❤
Thank you 😊
developing my dissertation with the help of your videos, thank you a lot, man)))
You welcome 🤗
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?
I have covered these widgets in my crash course. here is the video of radio button: ua-cam.com/video/JLdit0tnwp8/v-deo.htmlsi=Z3TFj4fjIr-Wj7gK
and here is the video of dropdown: ua-cam.com/video/6_Azs3fq9O4/v-deo.htmlsi=sSk5j-d0UXCpuMay
You can also watch complete crash course: ua-cam.com/play/PL5jb9EteFAODi35jPznP37hnR2sTHOOTU.html&si=MWb_c3m555w4-ZxZ
Thank you so much brother. ❤ from Bangladesh
You're welcome. I am glad that my videos are helpful for you. Thank you for your love and support ♥️
Does the Form Widget have inbuilt Light - dark mode theme? Because we havent used the dark variable for the TextFields in the Signup Form, still the colour changes on its own.
We have already create the themes of text form fields and buttons. Please check the video ua-cam.com/video/Ct9CrMegezQ/v-deo.html&lc=Ugxuj0-oLojDm7G2GW94AaABAg
To avoid defining isDarkMode every time in the buildContext of each class, an extension to the context class will make the code cleaner:
extension ContextExtensionss on BuildContext {
/// similar to [MediaQuery.of(context).padding]
ThemeData get theme => Theme.of(this);
/// Check if dark mode theme is enable
bool get isDarkMode => (theme.brightness == Brightness.dark);
...
}
and easy call context.isDarkMode in each class.
That’s a great suggestion! Using extensions on BuildContext like this is an excellent way to streamline and clean up your code. It simplifies accessing theme properties and enhances readability by allowing you to use context.isDarkMode directly.
Thanks for sharing this useful tip! 👍
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...
First try to assign the color as 99% have not assigned the color so it's not visible otherwise reach me at support@codingwitht.com
What is the extension u use to estructure the code with the left line?
That's the build in feature of the Android studio
Assalamualaikum. A humble request to make some complete projects using Riverpod State management library with custom backend like this. Jazak Allah khayer
Walaikum salam, noted buddy
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
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 😊
I think you are talking about TermsAndCondition widget. Use Expanded and Flexible to overcome
@@CodingwithT Thank you so much 💙
Nice well-done 🎉
Thank you 😊
New Subscriber 🎉
Welcome onboard brother 🤠😃🎊
hello sir, what is fontText u use?
I used Poppins as a font. You can also get the Project starter kit for free from codingwitht.com/product/flutter-ecommerce-app-with-firebase/ , containing folder structure, localization support, error handling, utilities, assets, constants, sizes, and customizable themes. It's designed to kickstart your project with essential elements.
@@CodingwithT thanks sir
when will the next vids will be uploaded? im excited to learn from you sir
Thank you 😊 for your support and Love.
Next videos are coming very soon on a daily basis.
perfect bro =D
Thank you 🙏
❤❤❤
Sir why u didn't make custom textformfield?
Because it's not required. I have already designed my Themes in the Section 1 Theme tutorial.
So once we have our own designed theme then we don't have to redo it again and again.
Just use simple TextFormField and it will automatically use the theme we assigned earlier.
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.
====================================================================================================
This means you are using Get.toNamed and pass the string signupscreen but first register this in GetPages[]
paypal is declining payment..any help pls
Can you please use any other payment method. I will look into this matter.
❤❤
Thanks
Add photo section also
Photo will be in the profile 😊
Ok sir wait .. But user can pick photo and store in firebase