Login Page in Flutter tutorial - Flutter Login Page UI 2023

Welcome to this Flutter eCommerce App tutorial where you'll embark on a journey to create a sleek and minimalistic login page in Flutter app.
► Flutter eCommerce App Course: • Professional Flutter E...
🎊 E-COMMERCE APP
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
🎁 DOWNLOAD SOURCE CODE: codingwitht.com/product/flutt...
❤️ FLUTTER E-COMMERCE APP PLAYLISTS
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
► Complete E-Commerce App : • Professional Flutter E...
► Section - 1 Configuration : • Professional Flutter P...
► Section - 2 Login App : • Professional Flutter P...
► Section - 3 eCommerce UI : • Flutter Complete Ecomm...
► Section - 4 Login Backend: • Flutter Firebase Cours...
► Section - 5 eCommerce Backend: • Flutter E-Commerce App...
❤️ SUBSCRIPTIONS
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
► Join Patreon to Access Premium Content: / membership
COURSES
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
► FLUTTER CRASH COURSE • Flutter Crash Course f...
► LOGIN APP FIREBASE • Flutter Login App - UI...
🧑‍💻 RELATED VIDEOS
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
► Custom App Bar: • Flutter Custom AppBar ...
► Custom Shape: • Flutter Clip Path Tuto...
► Circular image: • Search Bar and Horizon...
► Grid Layout & Product Design : • Gridview in Flutter wi...
► All Products Page Design • Flutter All Products P...
FOLLOW US ON SOCIAL MEDIA
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
💻 Facebook | / codingwithtea
💻 Instagram | / coding_with_tea
❤️ Subscribe | kzbin.info...
CHAPTERS
00:00 Introduction
01:28 Create Classes
03:20 Design Header
05:40 Design Form
09:01 Design Buttons (Sign in, Create Account)
10:31 Adding a Divider
10:47 Design Footer with Google and Facebook icon
14:33 Extract Reusable widgets
DETAILS
In this flutter tutorial, we will design
Login Page with Login Form and a Social Sign in options. Our design will in both light & dark modes.
In this tutorial, you'll discover how to craft a modern Flutter login page that's both visually appealing and user-friendly. The login screen will feature a header section complete with an image, setting the tone for your app's aesthetics. Moving forward, you'll design a login form page, complete with options for forget password and remember me.
To add that extra touch of elegance, you'll also learn how to create a stylish divider that can be reused as a separate widget, enhancing the screen's overall design. And to wrap it all up, we'll design a footer that includes convenient login options using Google and Facebook accounts.
By the end of this tutorial, you'll have the skills to create a contemporary and user-centric login screen that leaves a lasting impression on your app's users. Let's dive in and start crafting this modern login screen together in Flutter!
#tstore #codingwitht #ecommerceapp #flutter #ui #uidesign

[@aquamarin6160]

Aleyküm Selam from Türkiye. You are the best teacher I have ever seen. You are quite inspiring.

[@CodingwithT]

Thank you so much 😊

[@FelipeCampelo0]

Wow! What learning journey this series is!

[@CodingwithT]

Glad you think so

[@nellahroe8872]

how do i create the widgets to work how you did? do i create all the dart files normally/manually , create a class and paste the codes for each? i don't understand, please some one help me

[@FelipeCampelo0]

11:58 In 'onboarding_controller.dart' I had to make these updates: FROM /// Jump to the specific dot selected page. void dotNavigationClick(index) { currentPageIndex.value = index; pageController.jumpTo(index); *here* } TO /// Jump to the specific dot selected page. void dotNavigationClick(index) { currentPageIndex.value = index; pageController.jumpToPage(index); *Make sure it is jumpToPage* }

[@marleyfozeu8819]

Hello,the next button still don't work even after the changed. any other suggestions ?

[@activegoogle4501]

احسنت الشرح

[@mahmoud_hamdy_flutter]

briliant

[@CodingwithT]

Thank you for your support ❤️

[@ZiadThabet-nh4tg]

is there flutter tutorial for admin panel?

[@aouadicharaf1038]

❤❤❤

[@ChildrensDancing]

Hello, I really liked this course, but I have an error here with the jump button, more precisely, the dots and the NextPage button do not work for me, please help me solve the problem that I can continue the course

[@CodingwithT]

Hi, I am sorry that you got the error in the code. I know that getting the error is frustrating. You can share the details of the error on my WhatsApp so that I can get to know what is the issue and help you resolved the error.

[@TeamProfitisers]

You just need to comment some lines to jump to the Login Screen: // - means comment. void nextPage() { // if(currentPageIndex.value == 2){ Get.offAll(const LoginScreen()); } // else{ // int page = currentPageIndex.value + 1; // pageController.jumpToPage(page); Try this!

[@bentalla]

Hey Sir how are you ? Tell me what is the extension that u use for making your code like a three

[@CodingwithT]

I didn't add any extension. It's built-in in the Android studio. I guess you can find this out in settings -> languages -> flutter. Do Google

[@paulmurray3244]

where did you source those amazing animated gifs? I'd love to change them, for my app.

[@CodingwithT]

You can search them on Icons8 and if you want lottie files, you can get those from Lottiefiles.com

[@NavdeepMaheshwari]

Sir where can we find the styling of ElevatedButtons , TextFormFields etc. please create a short video for that as well.

[@CodingwithT]

It's already created in Section 1 of this same playlist. You only have to design your Buttons, TextFormField and any other Widget in the Themes for both light and dark modes and you are done. Please watch the 2nd Video of Themes in Flutter of this playlist. Link is in the description

[@NavdeepMaheshwari]

Thank You Sir@@CodingwithT

[@CodingwithT]

You're welcome 😊

[@b.farhana]

sir could you please tell me which website is you are using for illustration images🙂

[@CodingwithT]

icons8.com

[@b.farhana]

@@CodingwithT Thank You sir

[@CodingwithT]

Anytime ☺️

[@hemantprajapati5323]

Why you're not using mediaquery for spacing and other stuff. How are you going to make app responsive on basis of different devices??

[@CodingwithT]

This tutorial is primarily focused on developing for Android and iOS platforms, rather than web. We're implementing adaptive design principles to ensure the app functions well across various mobile devices. I'll be uploading tutorials specifically focused on the admin panel. Stay tuned for those tutorials-they'll cover everything you need to know for creating a responsive design for web. If you have any other questions or suggestions, feel free to share!

[@azeemhassanch]

Bro please increase font size overall in your next tutorials

[@CodingwithT]

Noted

[@deadmet21]

how do you make your emulator skin look like iphone?

[@GlamAngles]

Sir! do you have Linkdln account?

[@iacopopaolucci6410]

Which font is used for title and subtitle? Can you show the style file ? Because I copy your code, line by line, but my UI is not good like your, thanks for all!

[@CodingwithT]

I have used the Poppins font, I suggest you to watch the previous Section 1 of this Playlist. Your all questions will hopefully be solved 🤩

[@iacopopaolucci6410]

@@CodingwithT for Section 1do you mean the First video of this Playlist? Can you share the link of the video because I don't found this Section, thanks!

[@CodingwithT]

kzbin.info/aero/PL5jb9EteFAOAusKTSuJ5eRl1BapQmMDT6

[@iacopopaolucci6410]

@@CodingwithT thank you very much!🫶

[@CodingwithT]

Anytime 😊

[@dark_sidegaming1829]

hello, I wanna ask something when u select a column in the code under (logo, Title & Sub-Title) at time 14:38 from the video what did u name it? you said you will do it all real quick and skipped after u did it and I didn't know what to do so that left me lost and now idk what to name it?😢

[@CodingwithT]

Sorry for the confusion. You can name it anything you like. I named them as TLoginHeader, TLoginForm, ....

[@dark_sidegaming1829]

@@CodingwithT Yeah ik u can name them anything i just want to ask which ones cz there are many words named column btw thanks for your help I'm working now with flutterflow I found it much easier for me and last thing I wanna say I REALLY LIKE YOUR VIDEOS KEEP GOING!!!

[@MuhammadUsama-vv1wo]

Hello there!! at 11:20 my next button is not working as it does not take me to the next onboarding screens and after pressing the skip button it took me last onboarding screen but next button not take me to the login screen. When i pressed the next button is shows the pressing but not working also same with dotNavigation dots. Kindly give me the reasons as i have mentioned the next button code below: ///Update Current index & Jump to next Page. void nextPage() { if(currentPageIndex.value == 2){ Get.offAll(const LoginScreen()); } else{ int page = currentPageIndex.value + 1; pageController.jumpToPage(page); } }

[@CodingwithT]

Can you book your coat and check if it is working or not if it is even entering in that statement?

[@MuhammadUsama-vv1wo]

@@CodingwithT i can not get you. Can you please elaborate it??

[@Mrlikeandshare]

siir thanks a lot, i have one question plz, when i switch phone from light mode to dark mode the button create account dosn't change in dark mode still in black there is an solution plz ?

[@CodingwithT]

Did you watch the theme tutorial? I have create elevated button theme in it. kzbin.info/www/bejne/eaWcdKWDmsyYsLM at 15:21. After creating elevated button theme you will be able to change the color of your button in different modes. If your issue persists, you can contact me on whatsapp.

[@Mrlikeandshare]

thanks a lot @@CodingwithT

[@mehrdadhosseini5448]

I used the TextInputFormField as you did, But the Theme data style has not been applied on it

[@CodingwithT]

Did you created your themes and assign them in the MaterialApp?

[@moeednisar9444]

Why TFormDivider(dividerText: TTexts.orSignInWith.capitalize!), is giving error? Please suggest Error: Method invocation is not a constant expression.

[@CodingwithT]

Just remove the "const". Which is used before the widget.

[@moeednisar9444]

Thank you

[@codekisssundaysayil9080]

what tools are you using to zoom in and out easily

[@CodingwithT]

Video editor?

[@codekisssundaysayil9080]

Yes, the video editor, I enjoy your presentation. It's clear.

[@TeamProfitisers]

Could you please assist us to resolve this error? Exception has occurred. _AssertionError ('package:flutter/src/widgets/scroll_controller.dart': Failed assertion: line 155 pos 12: '_positions.isNotEmpty': ScrollController not attached to any scroll views.)

[@TeamProfitisers]

The error appears when I click on the Next Button (to move to the login screen).

[@binildev9064]

when I convert the divider to widget it ask for a required dark as a boolean value, but it is not occurred in the video. What can I do to fix that?

[@CodingwithT]

I've shown that. You have to simply create a final dark = THelperFunction.isDarkMode()

[@CuongHoang-nk8ig]

@@CodingwithT where can i find that sir, i got the same problem

[@CuongHoang-nk8ig]

did you solve this problem?

[@asthma2616]

Hello my dear friend. Why can't I make rounded shape margins like yours? Which parameter is responsible for this?

[@CodingwithT]

Hi, to make the rounded shape margins of the buttons you have to use shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(TSizes.buttonRadius)),

[@asthma2616]

@@CodingwithT thank you!

[@iamrealadnan1786]

Sir my next button and skip is not working..What should I do?

[@CodingwithT]

Please check if you've correctly linked the onPressed functions for both buttons and ensure the necessary logic is implemented.

[@ChildrensDancing]

Has anyone solved the problem with the jump button, if so please help

[@CodingwithT]

Hi, I am sorry that you got the error in the code. I know that getting the error is frustrating. You can share the details of the error on my WhatsApp so that I can get to know what is the issue and help you resolved the error.

[@huantruong8793]

I have an issue with labelText, it turns black when TextFormField is focused in dark mode. Pls instruct me to solve the issue

[@CodingwithT]

did you set up the theme of the project? You can also get the project starter kit from the product link in the description for free.

[@huantruong8793]

@@CodingwithT I did set up the project theme and tried the project starter kit also. But I still have the issue. I am currently running flutter 3.19.3

[@utsavkhamar8948]

How to get a job in flutter ?? I have 6 month of internship experience in flutter still getting problems to get a fresher level job

[@CodingwithT]

Keep up with a Good work. build strong profile by doing freelance projects and do not focus on the money. You might at the end come up with your own Business.

[@Khaled_Abd-Elazem]

i cant go to login page from the OnBoardingScreen it keeps say [GETX] GOING TO ROUTE /LoginScreen [GETX] REMOVING ROUTE / what can i do?

[@user-vk1wj8mj6w]

are u sure in onBoarding controller in the skipPage function u did it pageController.jumpToPage(page); ?..... don't forget to add jumptoPage()

[@Khaled_Abd-Elazem]

yah its the same @@user-vk1wj8mj6w

[@fizz1028]

How to change create account button color?

[@CodingwithT]

You can change the color of outlined button from utils=>theme=>widget_themes=>outlined_button_theme.dart

[@marleyfozeu8819]

Hello, i've a problem with the next button, it doesn,t work for me. Any suggestions ?

[@marleyfozeu8819]

Also, are they 02 onboarding files?, Because the codes changed from the previous tutorial thanks

[@CodingwithT]

There could be several reasons why it's not functioning properly. You have to Check Button Implementation, Inspect Navigation Logic. Debug the code so that we can find issues

[@CodingwithT]

No, there is only one file of onboarding but there are different classes that are connected.

[@alielemam3149]

how to run iphone emilator in windozz??

[@CodingwithT]

not recommended to ron iphone emultor in windows but Running an iPhone emulator (iOS simulator) on Windows is not directly supported by Android Studio or any other official tools provided by Apple. iOS development and testing require macOS and Xcode, which is only available on Mac computers. However, there are some alternative solutions you can consider: Use a Cloud-based iOS Simulator: There are cloud services that offer iOS simulators accessible from a web browser. You can upload your app to these platforms and test them on virtual iOS devices. Examples include Appetize.io and BrowserStack. Install macOS on a Virtual Machine: You can create a virtual machine on your Windows PC using software like VMware or VirtualBox and install macOS on it. Once macOS is installed, you can install Xcode and use the iOS simulator as you would on a Mac. Use Remote Testing Services: Some testing services provide access to physical iOS devices remotely. You can remotely control these devices from your Windows PC and test your apps. Examples include AWS Device Farm and Firebase Test Lab. Keep in mind that while these solutions allow you to test iOS apps on Windows, they may have limitations compared to testing on a real Mac machine. Additionally, ensure that you comply with Apple's licensing agreements and terms of use when using macOS in a virtualized environment.

[@yassinerighi3787]

where cani get those icons? (the arrow and password)

[@CodingwithT]

It's the Iconsax library. Please watch the first Section 1 videos.

[@WoyEjak]

Sir, why isDarkMode not working on my phone? it always evaluates to false

[@CodingwithT]

Never happened before. Do a restart

[@salmanahmed3938]

is your app responsive? because you are giving fixed height and width.

[@CodingwithT]

There are two approaches responsive and adaptive. I have used the adaptive approach for the app. My app is made on an adaptive approach which will adapted by all mobiles. This means that while some elements may have fixed sizes for consistency and design integrity, the layout as a whole adjusts and scales appropriately to fit various screen sizes and resolutions. This ensures a seamless user experience across different devices.

[@musautmani6706]

You have to teach slowly,ur speed of teaching is lead us toward confusion,we can not understand things properly.

[@botplaysgame]

bro it depends on preferences I like to watch tutorial videos at 2x. These videos are at perfect speed some people like to make video at slower speed so that they can have longer videos but here at least he is giving quality content in less period of time. You can always watch at 0.5x. Its all personal preferences bro.

[@CodingwithT]

You both are right. I will try to find some way out 😀

[@musautmani6706]

Yes I do agree but for beginners it is difficult to understand things properly that's why I have said,anyway sir is putting his best in the course.

[@CodingwithT]

Thank you bro

[@musautmani6706]

@@CodingwithT 😘😍

[@shahzaibmehmood65]

Why are you not using the buttons your tutorial is distracting

[@CodingwithT]

Can you please explain what do you mean by not using buttons(which buttons and where) and where are you confused?