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.

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

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

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

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

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

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

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

[aquamarin]

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

[FelipeCampelo]

Wow! What learning journey this series is!

[nellahroe]

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

[ZiadThabet-nhtg]

is there flutter tutorial for admin panel?

[paulmurray]

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

[bentalla]

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

[deadmet]

how do you make your emulator skin look like iphone?

[FelipeCampelo]

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;
*Make sure it is jumpToPage*
}

[NavdeepMaheshwari]

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

[dark_sidegaming]

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?😢

[hemantprajapati]

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

[iacopopaolucci]

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!

[b.farhana]

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

[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 ?

[MuhammadUsama-vvwo]

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;

}
}

[mehrdadhosseini]

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

[moeednisar]

Why TFormDivider(dividerText: TTexts.orSignInWith.capitalize!), is giving error?
Please suggest

Error: Method invocation is not a constant expression.

[binildev]

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?

[TeamProfitisers]

Could you please assist us to resolve this error?

Exception has occurred.
_AssertionError Failed assertion: line 155 pos 12: '_positions.isNotEmpty': ScrollController not attached to any scroll views.)

[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