🔒📱 Modern Login UI • Flutter Auth Tutorial ♡

Поделиться
HTML-код
  • Опубликовано: 4 окт 2024
  • 💰 I'll develop your MVP app: mitchkoko.app/mvp
    📱 Code: mitchkoko.app/
    🎓 Flutte Beginner Course: • 📱 FULL Flutter Beginne...
    💌 Email: business@mitchkoko.app
    ~;
    / createdbykoko
    / createdbykoko
    / createdbykoko
    / mitchkoko
    ~;
    In this series, we are going to implement AUTHENTICATION to our Flutter apps! This video will cover the UI for the login screen, then we will use this in the following videos to add email authentication, google and apple sign in.
    FLUTTER AUTH PLAYLIST:
    1 • 📱 Modern Login UI • • 🔒📱 Modern Login UI • F...
    2 • 📱 Email Login & Logout • • 🔒📱 Email Login & Logou...
    3 • 📱 Email Sign Up • • 🔒📱 Email Sign Up • Flu...
    4 • 📱 Google Sign In • coming soon..
    5 • 📱 Apple Sign In • coming soon..
    SOURCE CODE • github.com/mit...

Комментарии • 229

  • @createdbykoko
    @createdbykoko  Год назад +28

    💬 Chat App w/ Notifications • mitchkoko.gumroad.com/l/ChatAppMasterclass
    📱 Flutter Masterclass • mitchkoko.app/
    🔥 I'm coding a startup.. www.patreon.com/mitchkoko
    FLUTTER AUTH PLAYLIST:
    1 • 📱 Modern Login UI • ruclips.net/video/Dh-cTQJgM-Q/видео.html
    2 • 📱 Email Login & Logout • ruclips.net/video/_3W-JuIVFlg/видео.html
    3 • 📱 Email Sign Up • ruclips.net/video/qlVj-0vpaW0/видео.html
    4 • 📱 Google Sign In • ruclips.net/video/1U8_Mq1QdX4/видео.html
    Here's the SOURCE CODE for this UI • github.com/mitchkoko/ModernLoginUI/
    Everything in Flutter is a widget so if you need more understanding on individual widgets, check out my..
    WIDGET OF THE DAY PLAYLIST • ruclips.net/p/PLlvRDpXh1Se5LTJZDrUF9h1_1AT4Raxjd
    also.. CONNECT WITH ME ON TWITTER • twitter.com/createdbykoko
    I hope this helps you ✌🏾❤

    • @zwezaw3990
      @zwezaw3990 Год назад

      beginner hand book is free? I need it. how to do get it? pls help me.

  • @underlord3761
    @underlord3761 Год назад +41

    Nice, I stumbled upon your channel as a newbie 2 months ago and now I can code along with you with ease thanks to your engaging teaching style. Don't ever stop bro, you're really helping.
    Love from 🇳🇬.

    • @createdbykoko
      @createdbykoko  Год назад +4

      Hey welcome haha i made these tutorials for people like u. Good luck 👨🏽‍💻❤️🇳🇬

    • @gaurabroy4371
      @gaurabroy4371 Год назад +1

      I started my flutter development journey watching his video. And now I'm working in a firm as a flutter developer ✌️ guess you're on the way buddy...

  • @M.W__
    @M.W__ 2 месяца назад +2

    i've never seen such a neat, elegant, simple tutorial thank you man🥳

    • @I_am_T00FAN
      @I_am_T00FAN Месяц назад

      Hey, is there a future for Flutter app development in 2025 and the coming years? I’m worried that if I complete my Flutter app development course, it won’t be valuable, like when I learned HTML and CSS but moved on because web development was declining due to AI technology!!!

    • @M.W__
      @M.W__ Месяц назад

      @@I_am_T00FAN honestly i don't know much about the future of flutter but i think you should go on with your flutter development. because you will get job opportunuties or people want you to develop them an app for example

  • @sumirandahal76
    @sumirandahal76 Год назад +41

    To prevent pixel overflow you forgot to wrap the login UI Center with SingleChildScrollView widget, so I did. Thanks for this neat tutorial, and please continue this series. Peace Out !

    • @createdbykoko
      @createdbykoko  Год назад +11

      Oh you are right i forgot that!!!!! I’ll have to add it in the next video

    • @nivinpauli1432
      @nivinpauli1432 Год назад

      How to do?

    • @khawan5534
      @khawan5534 Год назад +4

      06/2023 - Set resizeToAvoidBottomInset to false in Scafold

    • @FelipeCeglio
      @FelipeCeglio Год назад

      @@khawan5534 GOD!

  • @sylentifytv
    @sylentifytv Год назад +10

    I just started making my first mobile app for my application and everytime I youtube a tutorial for an aspect of the app your always there, I thank you for these clean and simple videos!

    • @createdbykoko
      @createdbykoko  Год назад +1

      Hey my pleasure 👨🏽‍💻❤️ good luck making your first app!! That’s exciting and definitely a big moment!! 🍾🍾

  • @VijilalFlutter
    @VijilalFlutter Год назад +3

    I'm a beginner in flutter code and in coding too. I'm searching for a good flutter tutor at last I have discovered the best one. Thanks for your videos. it is super understandable even a very beginner like me. Thanks a lot.

  • @sovady
    @sovady Год назад +6

    The definition of "coding like a pro". Great tutorial thanks!

  • @lindaningubane2745
    @lindaningubane2745 Год назад +2

    I started mobile and web development ayear ago with your tutorials. Today im a semi pro with flutter bloc and i go back to perfect my UI with your tutorials. Data is expensive in South Africa but i would love to share my knowledge one day when i get paid for my work.

    • @creativelinkagency
      @creativelinkagency 11 месяцев назад

      I am from Lesotho bro and a Junior developer strugling with a final year project, I think your knowledge will benefit a lot of people🙏

  • @catsofia8072
    @catsofia8072 Год назад +10

    You are just brilliant at explaining things in such a short time! Thank you for your efforts and constantly producing great content!

    • @createdbykoko
      @createdbykoko  Год назад

      Aye ur words mean a lot to me ❤️

    • @catsofia8072
      @catsofia8072 Год назад

      @@createdbykoko No problem, you are a life saver for us noobs :D

  • @UnityOfPlurality
    @UnityOfPlurality 3 месяца назад +1

    Excellent tutorial, straight forward and concise! Easy to follow for a Flutter beginner though I wish I could type as fast as you can 😉

  • @yusra5100
    @yusra5100 Год назад +4

    Your videos are very understandable thanks to your completely clear explanation and canonical and clean code. THANK YOU SO MUCH THIS IS VERY RARE.

    • @createdbykoko
      @createdbykoko  Год назад +2

      Haha my pleasure! Glad it helps you 👨🏽‍💻❤️

  • @ugochukwuanajemba3117
    @ugochukwuanajemba3117 Год назад +7

    Nice design and component concepts...looking forward to more videos of this nature

  • @sslaia
    @sslaia Год назад +1

    Hi, I like your tutorial, especially because you explain the reason why you code something that way. For a beginner like me, this background explanation is very important to understand the code. And I also like your calming voice. It helps to concentrate and to relax (makes coding fun). Thank you very much.

    • @createdbykoko
      @createdbykoko  Год назад

      No problem, your words mean a lot to me! Welcome 💜

  • @selinarslan806
    @selinarslan806 Месяц назад +1

    THANK YOU SO MUCH FOR THIS VIDEO, IT HELPED ME A LOT

    • @createdbykoko
      @createdbykoko  Месяц назад

      Glad it helped!!!!!! What are you making :P

  • @RojaySuccessful
    @RojaySuccessful Год назад +3

    "Let's decorate the shit out of this" lol my guy!👌🏾

  • @judejeevanmahendran
    @judejeevanmahendran Год назад +1

    That was awesome! I am a flutter newbie and now I feel confident after watching your videos. Keep doing it ❤

  • @itsahmed-dev
    @itsahmed-dev Год назад +37

    Let's decorate the $#!% out of it 🤣

  • @noelgomile3675
    @noelgomile3675 6 месяцев назад

    Tip: You can write widgets without immediately specifying them as const and then when you're done press Ctrl + . and click on the suggestion to add const everywhere in the file. Where appropriate of course.

  • @IccyAnime
    @IccyAnime 5 месяцев назад

    Man your tutorials are very clean, thanks a lot
    I'm having fun coding some projects with flutter and mongoDB

  • @metehanmete1210
    @metehanmete1210 Год назад +2

    again and again excellent job from mitch ! Thnx for the tutorials love u brother

  • @santangelx1573
    @santangelx1573 Год назад

    Your voice is great, I'm building an app and I have the feeling I'm going to be seeing all of your videos

  • @iruafeimi
    @iruafeimi Год назад

    this is one smooth tutorials.. i just adopted the components parts, write clean codes now

  • @ron_barzilay
    @ron_barzilay Год назад +2

    Awesome design my friend!
    You are talented

    • @createdbykoko
      @createdbykoko  Год назад +1

      Thanks ron appreciate it :D how's flutter going for u so far?

    • @ron_barzilay
      @ron_barzilay Год назад

      @@createdbykoko Really really good, always learn new things, thanks ☺️

  • @doctor_no_
    @doctor_no_ 2 месяца назад

    Thank you! This is the first tutorial in which I actually understand as I follow along! I run into a slight problem though. I use an android emulator. The screen looks fine but if I press into the input boxes, a large keyboard shows up in the emulator and it then says that there are overflowing pixels

    • @doctor_no_
      @doctor_no_ 2 месяца назад

      I solved it by wrapping the column with SingleChildScrollView in the Login page and also use the option resizeToAvoidBottomInset: false in the Scafold. here is the code:
      Widget build(BuildContext context) {
      return Scaffold(
      resizeToAvoidBottomInset: false,
      backgroundColor: Colors.grey[300],
      body: SafeArea(
      child: Center(
      child: SingleChildScrollView(

  • @fadhilivunza
    @fadhilivunza Год назад +3

    Awesome vid, keep up the good work.

  • @nekomanga8018
    @nekomanga8018 Год назад +1

    Thanks for the great tutorial.
    I look forward to Google sign in.

  • @ghulammurtaza7959
    @ghulammurtaza7959 Год назад +5

    Hi, your videos are always great, but I have noticed your videos are coming slowly. Before you provided a grocery app store video that was awesome please create more videos like that in provider.

    • @createdbykoko
      @createdbykoko  Год назад

      Haha i’ll try to produce more and more! Especially like the grocery app. Thanks for commenting Ghulam❤

  • @noglory7957
    @noglory7957 Год назад +2

    Keep up the good work. Learned a lot from u.

  • @johnklahn7720
    @johnklahn7720 Год назад

    thank you sooo much Mitch! this small example helps me very much in kicking off my project for my company website! cheers! can't wait to view the other vids. thanks for the git files too!!! so helpful my friend!.. johnny

  • @muhammadfaraz3697
    @muhammadfaraz3697 Год назад +3

    very clean looking UI

    • @createdbykoko
      @createdbykoko  Год назад

      Thanks muhammad! How’s flutter going for u so far?

    • @muhammadfaraz3697
      @muhammadfaraz3697 Год назад

      @@createdbykoko so far so good. Thank you for your flutter tutorials. Keep uploading ;)

  • @franciscogabriel1771
    @franciscogabriel1771 Год назад +2

    Awesome! I`m from brazil and i`m learning a lot with your videos

    • @createdbykoko
      @createdbykoko  Год назад +1

      🇧🇷🇧🇷⚽️i love ur country

  • @mariolimaju
    @mariolimaju 11 месяцев назад +1

    Amazing! Thank you very much for this.

  • @nvl2254
    @nvl2254 6 месяцев назад

    Fantastic tutorial. Love the minimal design

  • @عبدالقادرعبدالرحمنعبدالله

    very helpful contents from this channel. Thank you for sharing. learning a lot from you.

  • @patiencendiritu6900
    @patiencendiritu6900 7 месяцев назад +1

    How do I fix the "Error: Unable to find git in your PATH." error while trying to run my program. I have tried configuring the program path on my launch.json file but to no avail. Do help

  • @Soulandbone
    @Soulandbone Год назад +1

    one small comment, Ive seen in various places that is better to have the assets folder in the root folder of the app, meaning not inside the lib folder, but one level up.

    • @createdbykoko
      @createdbykoko  Год назад

      Yeah i noticed that too. But don’t think it’s that big of a deal either way

  • @lesptitsoiseaux
    @lesptitsoiseaux Год назад

    Could you make a tutorial on how to extensively use sizer (the package) to really design responsively? Maybe this is a bad suggestion. I just don't know how to design for various phone sizes...

  • @rrichforever
    @rrichforever Год назад

    Brow...
    Im excited about this, really...
    Can we slow down a bit cos I'd want to soak it all in...
    You're the best.

  • @hybridboi5002
    @hybridboi5002 Месяц назад +1

    question: doesnt using sized boxes a lot makes the UI hard coded for only one screen size? meaning if the app is opened in a smaller device, it will have overflow?

  • @masterharith8488
    @masterharith8488 Год назад +1

    i would like to see, auth for when user put wrong email, same email as firestore or wrong password

  • @madesetiawan
    @madesetiawan Год назад +1

    Thanks bro. Your tutorial help for learn flutter.

    • @createdbykoko
      @createdbykoko  Год назад

      No worries brother! How is flutter going so far? Welcome to the flutter world hahah

  • @dhalle
    @dhalle Год назад +2

    Cool Sir its nice sir also Make Us Phone Auth and send OTPs in this series

  • @peteribrahim1
    @peteribrahim1 Год назад +2

    Nice tutorial. When are you dropping the authentication part?

  • @kirankumar-li8dq
    @kirankumar-li8dq Год назад

    Great Videos and such an interesting series , These are very helpful . I hope I can use it in for my upcoming project assignments.

  • @shankssavage9950
    @shankssavage9950 Год назад +1

    can you make a video on phone authentication with otp plz

  • @viniciusalmeida741
    @viniciusalmeida741 10 месяцев назад

    Amazing tutorial buddy! Thanks for this!

  • @priyanshupatra2100
    @priyanshupatra2100 Год назад +1

    I am a big fan of yours, no offence but the screen isn;t responsive, LOVE FROM INDIA❤

  • @JaedanKennaway
    @JaedanKennaway Год назад +4

    did you study at a university to learn programming or are you self-tought? I'm currentky in the early stages of my learning and i cant decide whether i want to go through a university or self teach. also great tutorials, by far the best i have seen

    • @createdbykoko
      @createdbykoko  Год назад +6

      I did do a bit of computer science at uni BUT i would say basically everything for me is self taught. I think youtube/internet has better value than a university. The only good thing about University is the social aspect of it

    • @JaedanKennaway
      @JaedanKennaway Год назад +1

      Oh i see , thats good to know. how did you decide on choosing flutter over native languages like swift?

    • @createdbykoko
      @createdbykoko  Год назад +5

      @@JaedanKennaway haha the fact that Flutter is cross-platform is a big plus for me. I want to publish apps for android + iOS :)

  • @bleatze
    @bleatze 5 месяцев назад +1

    How to make component files with stateful widget? The variable are always undefine

  • @amirmaalaoui3178
    @amirmaalaoui3178 11 месяцев назад

    I've learned a lot from your video thank you

  • @yeonjin8
    @yeonjin8 7 месяцев назад +1

    나는 당신의 모든 디자인을 사랑합니다❤

    • @createdbykoko
      @createdbykoko  7 месяцев назад +1

      ❤🇰🇷

    • @yeonjin8
      @yeonjin8 7 месяцев назад

      @@createdbykoko RUclips 동영상 중 하나를 사용하여 chatgpt를 내 앱에 통합하려고 했지만 지금은 멈췄습니다. 메시지를 보낼 수는 있지만 응답이 없습니다. 도와주실 수 있나요?
      🥺🥺

  • @Awesome奥深
    @Awesome奥深 Год назад +1

    Hey how do you make video for showing the phone devices.

  • @mubiitoedward4871
    @mubiitoedward4871 Год назад +1

    Thank you, you are the best.

  • @vidyashet800
    @vidyashet800 Год назад +1

    hi, Awesome video, I have a doubt here, what is function ()? ontap; Here what does ? used for after ( )

    • @createdbykoko
      @createdbykoko  Год назад

      This will explain ruclips.net/video/HeJN45xIK3o/видео.htmlsi=O7Gy-V9i6qa574bD

  • @efs1223
    @efs1223 9 месяцев назад

    Outstanding content bro! I just wanna ask since I'm a beginner in literally everything that I've watched, I just wanna know how do you project or output the changes realtime with a phone like what you just did there? Thanks in advance!

  • @philipkhoy7825
    @philipkhoy7825 Год назад

    Thank You. Please keep sharing.

  • @saqlain_ch
    @saqlain_ch 2 месяца назад

    It was causing issue of when we try to type in android because keyboard comes up and this is not slidable so i used the listview instead of Columns and it fixed the problem

  • @auliasabril1899
    @auliasabril1899 Год назад +2

    Keep a good work

  • @huevosyitz
    @huevosyitz Год назад

    as always, awesome tutorial. also, can't help but notice, do you really type with just one hand? omg 2:33. :D

  • @jrvero2387
    @jrvero2387 11 месяцев назад

    thank you bro regreats from Peru

  • @qwertycoding
    @qwertycoding Год назад

    Amazing video man, i appreciate you

  • @parampatel8853
    @parampatel8853 11 месяцев назад

    helped a lot!!! thankss

  • @sofiaspiridenkova4932
    @sofiaspiridenkova4932 Месяц назад

    hey there! i know that it's kinda old video, but maybe smbd can explain how can I make the edges of a text fields more rounded? the borderRadius is giving me mistake );

  •  21 день назад

    folowed along and still have bottom overflow with the last row

  • @mmathems395
    @mmathems395 Год назад +1

    Hi Mitch, thank you for this tutorial you have produced, I am going through it now ... Something that has struck me is that Flutter hasn't asked you to wrap the Scaffold due to a No MediaQuery widget ancestor ... Could you understand why? ... If I don't wrap with a MaterialApp the compile procedure fails.

  • @melomanoymelifluo7794
    @melomanoymelifluo7794 10 месяцев назад

    REALLY ELEGANT!!! GREETINGS FROM PERÚ

  • @AyushGupta-wn6zd
    @AyushGupta-wn6zd Месяц назад +1

    let's decorate the shit out of this 😂😂

    • @createdbykoko
      @createdbykoko  Месяц назад +1

      hahaha that means you actually watched 👍🏽

  •  Год назад +1

    awesome, thank you.

  • @winstonzhou9127
    @winstonzhou9127 Год назад

    great video but bro how many ads did you put on this

  • @elizasalcedo6782
    @elizasalcedo6782 10 месяцев назад

    thanks for the tutorial☺☺

  • @ap2402
    @ap2402 Год назад

    When would you use rows for the textfields instead of using sized boxes? Is there an advantage to place each textfield in a separate row?

  • @RichardPostma-f7n
    @RichardPostma-f7n 7 месяцев назад

    Hi Mitch.. very nice. I am new to futter and dart and i am trying to follow and copy what you do. Somehow I have this error on the main page at row 15 The argument type 'LoginPage' can't be assigned to the parameter type 'Widget?'. What did I not do, what I should have done? thx

  • @tusharamber1993
    @tusharamber1993 Год назад

    wonderful, really good

  • @matheusmelo4862
    @matheusmelo4862 Год назад

    Great tutorial!

  • @strix8956
    @strix8956 6 месяцев назад

    THANKS MAN!!!

  • @matheusnunes5643
    @matheusnunes5643 Год назад

    Migration of kotlin to flutter is so Hard..., but lets go 😢

  • @rebekahwells4307
    @rebekahwells4307 5 месяцев назад

    can you add this to an existing project? or will it change the entire layout of the existing project?

  • @edilsonroque6691
    @edilsonroque6691 8 месяцев назад

    Really good

  • @nikolas1549
    @nikolas1549 11 месяцев назад

    Hi, can you please tell me how you made the phone appear like you do? I'm a total begginer...

  • @parekhdeepsatishbhai4788
    @parekhdeepsatishbhai4788 Год назад +3

    Hey, share your thoughts on OpenAi ChatGpt....Meanwhile I am first...

    • @createdbykoko
      @createdbykoko  Год назад +1

      hahaha chatGPT looks really sick but I haven't played around with it yet.. what are your thoughts on it?

    • @parekhdeepsatishbhai4788
      @parekhdeepsatishbhai4788 Год назад

      @@createdbykoko then go and try...because I think it is going to wash out junior developer's job in near future....

    • @createdbykoko
      @createdbykoko  Год назад +1

      @@parekhdeepsatishbhai4788 haha i really wonder if it will. Creativity in AI is such an interesting topic

  • @templetonmeshack2816
    @templetonmeshack2816 Год назад

    Hello Mitch, do you have a video on how to implement real Payment with flutter strip?

    • @createdbykoko
      @createdbykoko  Год назад

      Not yet but that’s definitely on my list to do

  • @hopetechnologie2969
    @hopetechnologie2969 8 месяцев назад +1

    dube, adding const and removing its a bit confusing when a beginner follow you and don't make you good teacher

  • @ahnafsayor9321
    @ahnafsayor9321 Год назад

    what is the app or software you are using that is showing the iphone screen at the left?? can you mention that please and please tell if there is any such software for androids

  • @john7Doe9
    @john7Doe9 Год назад

    Thanks for your videos. They are very helpful! Have you ever thought about doing a Flutter Udemy Course? Would buy it right away..

  • @laurentiustavarache7384
    @laurentiustavarache7384 Год назад

    hello, nice tutorial, again and again! I don t understood (I am beginner) how you did empty fields (email,password..) to be empty when you return to loginPage. maybe you can help me with a word.. Thank you.

  • @madharry06
    @madharry06 Год назад +1

    hello sir please given the lecture of publish the app in google play store...

    • @createdbykoko
      @createdbykoko  Год назад

      I can but there are already good youtube videos about this topic i think?

    • @madharry06
      @madharry06 Год назад

      Sir I fellow you not others please 🙏 🙂 😔 sir one video plzz

  • @hirick1322
    @hirick1322 Месяц назад

    I was making a expense tracker app, and i used your login ui is it copyrighted? its for my freelance portfolio

  • @malluvocalist1416
    @malluvocalist1416 Год назад

    can you make a tutorial to build a simple chat app with back end

  • @c00per_
    @c00per_ Год назад

    Where's the next part of logging in

  • @farhankarim246
    @farhankarim246 21 день назад

    Which extension used for colors intensity?

  • @obong_samjoe
    @obong_samjoe Год назад

    please do a video on how to link android studio to Github

  • @mr.clumsy7225
    @mr.clumsy7225 Год назад

    Could you do a node.js tutorial? Thanks

  • @arunbm123
    @arunbm123 Год назад

    ❤nice and brilliant

  • @shazeemalichishty7322
    @shazeemalichishty7322 Год назад +1

    Thanks a lot

  • @terrigualbertokuchay691
    @terrigualbertokuchay691 11 месяцев назад

    Hello friend, how do you make the 3D animation of the phone so that it rotates and then the characteristics of your app appear?

  • @zwezaw3990
    @zwezaw3990 Год назад

    I need your beginner handbook. how to do get it?

  • @marat_akoev_travel
    @marat_akoev_travel Месяц назад

    perfect

  • @sasabo14
    @sasabo14 Год назад

    Hi, i know my question off the topic but where r u from?

  • @guybrushthreepwood6584
    @guybrushthreepwood6584 Год назад

    Danke!

  • @shuku_yega
    @shuku_yega Год назад +1

    I was wondering should the forget password be hyperlink