📱Minimal Login UI • Flutter Tutorial ♡

Поділитися
Вставка
  • Опубліковано 26 січ 2025

КОМЕНТАРІ • 188

  • @createdbykoko
    @createdbykoko  Рік тому +2

    🥷🏽 FOLLOW ME
    Patreon: www.patreon.com/mitchkoko/
    Instagram: instagram.com/createdbykoko/
    Twitter: twitter.com/createdbykoko/
    TikTok: www.tiktok.com/@createdbykoko/

  • @AdityaBolt
    @AdityaBolt 2 роки тому +174

    Make sure to Wrap your column in a singlechildscrollview to avoid an overflow error when the on-screen keyboard appears.

    • @createdbykoko
      @createdbykoko  2 роки тому +29

      This is an amazing tip. Thank you

    • @maxairop
      @maxairop 2 роки тому +1

      @HKS Seng No

    • @felizbertomacedo2984
      @felizbertomacedo2984 2 роки тому +1

      I didn't know about it, thanks for commenting.

    • @brunobraga60
      @brunobraga60 2 роки тому +2

      thank you, sir!

    • @kahanx10
      @kahanx10 2 роки тому +3

      You can also set the resizeToAvoidBottomInset property of a Scaffold to false, in order to avoid the resizing of screen when opening the keyboard, it works when you don't need to scroll but want to have the screen fixed at one place. I still prefer CustomScrollView.

  • @Coenie-je6pn
    @Coenie-je6pn 7 місяців тому +1

    Dude I love your approach. No bs, straight to the point.

  • @coltonsconyers1604
    @coltonsconyers1604 2 роки тому +10

    Teaching myself Dart/Flutter with zero coding background whatsoever. You’re videos make it feel like a much more easily achievable goal. Gained a subscriber from me!

  • @AdityaBolt
    @AdityaBolt 2 роки тому +33

    Hey container's have a built in padding property so try to avoid using padding widget in the child of the container, makes the code cleaner. Also for the padding widget outside the container(parent widget) try using the margin property of the container instead. Finally you could achieve the same text fields with the decoration property of the textinput field without the need of a container as a parent widget.

    • @createdbykoko
      @createdbykoko  2 роки тому +15

      thank you for the margin tip! I will definitely adopt that one. And yeah you are right about the decoration property in the textfields 😂 i was just lazy because im too familiar with the container decoration. Thank you for the feedback though it means a lot 👨🏽‍💻❤️❤️❤️

  • @pachenko2001
    @pachenko2001 2 роки тому +10

    Bro!!! Your tuts are off the charts!! I have high hopes of getting so much better at flutter just following you chief. Thanks for all the work and God bless you!💗💗💗💗❣❤‍🔥❤‍🔥👍👍👍👍

  • @nyinyijnine
    @nyinyijnine Рік тому +1

    thank you so much ko ko, i started learning flutter with Mitch Ko Ko, 5,9,2023

  • @nalindapriyamal
    @nalindapriyamal 4 місяці тому

    Codes and whole video feels so clean. Subscribed !

  • @yonahgraphics
    @yonahgraphics 2 роки тому +2

    Bro, thanks for the video. But which video is for setting up firebase on Android? I can't see it

  • @bloodwinggamer1444
    @bloodwinggamer1444 2 роки тому +2

    Bro I am facing error while creating container to test field
    If I click wrap with container for test field
    It gives lot of error plz help me out

  • @m.a.belkouri
    @m.a.belkouri 2 роки тому

    you're so talented bro

  • @eboatwright_
    @eboatwright_ 2 роки тому +2

    Thank you! This is super helpful, as I'm learning Dart & Flutter :D

    • @createdbykoko
      @createdbykoko  2 роки тому

      No worries 😉 glad it helps 👨🏽‍💻

  • @kamohelolebona4666
    @kamohelolebona4666 Рік тому +2

    Where the hell have you been all my life when i needed someone to help with Flutter,Your content is amazing ❤‍🔥

    • @createdbykoko
      @createdbykoko  Рік тому +1

      haha welcome. Btw i made a more updated login UI here ua-cam.com/video/Dh-cTQJgM-Q/v-deo.html

  • @obong_samjoe
    @obong_samjoe 2 роки тому

    Thanks!

  • @biscut6296
    @biscut6296 2 роки тому

    Great video dude!!!!

  • @charanrajana3221
    @charanrajana3221 2 роки тому +5

    That was great video mitch, really appreciate your work. Can you also include a darkmode version of the UI in your upcoming if possible? I can design a screen with good enough ui and ux but designing a same page for the darkmode feels redundant and time consuming. Would mean alot if you can make a video on theming a screen for both light and darkmode. Thankyou again man, your videos really helped me step-up my design game.

    • @yacineelhakimhaddouche6805
      @yacineelhakimhaddouche6805 2 роки тому

      You can use the theme property for your MaterialApp widget, check it out

    • @createdbykoko
      @createdbykoko  2 роки тому

      Check out the Theme in the material app. you can specify LIGHT or DARK there :D let me know how it goes

  • @Nobisuke
    @Nobisuke 2 роки тому +1

    This is my favorite creator so far, simple and very clean coding. looking forward for your future video. i am learning flutter and following your video

  • @inilonge2927
    @inilonge2927 2 роки тому

    This is really amazing. Please can you do a video on how to access different permissions on your phone like fingerprint auth, facial recognition, access to device files and contacts

    • @obong_samjoe
      @obong_samjoe 2 роки тому

      i think he has this in his course already....maybe

  • @ismailzaidi7967
    @ismailzaidi7967 2 роки тому

    thank you that helped a lot , greetings from Tunisia

  • @chobrandone6370
    @chobrandone6370 2 роки тому +1

    WERE IS THE SETUP FOR ANDROID SIR PLEASE

  • @chenanetaleb2226
    @chenanetaleb2226 2 роки тому

    Great channel, I've been looking for it for a long time

  • @urdulines6744
    @urdulines6744 2 роки тому

    best tutorial on youtube ever

  • @akmalraj121
    @akmalraj121 2 роки тому +1

    I just fall in love with your videos, I am watching all your videos and loving it !!!!!

    • @createdbykoko
      @createdbykoko  2 роки тому +1

      Hey welcome bro! 👨🏽‍💻❤️

  • @thesaulgamespace4539
    @thesaulgamespace4539 2 роки тому +4

    Hey, thanks for the hard work u put in doing these videos for us, i appreciate, and i was asking for a favor, if u can create an Audio Playing app, but the Audio files should be from the server. I'll be glad to see u make it happen.

    • @createdbykoko
      @createdbykoko  2 роки тому

      thanks for the comment :D I will look into that

    • @thesaulgamespace4539
      @thesaulgamespace4539 2 роки тому

      @@createdbykoko thanks for your time... it means alot.

  • @Ok-Chance
    @Ok-Chance 2 роки тому

    Hi , is this ui still work on others devices ? i mean in a small phone for exemple ! is the button will still appear in the screen

  • @chenchou
    @chenchou 2 роки тому +1

    Thank you for your videos, amazing!
    Wondering you would be able to share the source code for this or the end of this Firebase series.

  • @blackCodeDushans
    @blackCodeDushans Рік тому

    i want master React and Flutter both technologies,
    is it worth ?
    how could i practice both ?

  • @paininmydroid4526
    @paininmydroid4526 2 роки тому

    Fire tutorial as always.

  • @Crisisdarkness
    @Crisisdarkness 2 роки тому

    Estimated Mitch Koko, could you make a tutorial showing how to use the phone's camera to scan barcodes?

    • @createdbykoko
      @createdbykoko  2 роки тому

      Yes I was thinking of making a video about the camera scanning QR codes. might be similar for barcode

    • @Crisisdarkness
      @Crisisdarkness 2 роки тому +1

      @@createdbykoko Ohhh nice, thank you so much

  • @macramoran2509
    @macramoran2509 2 роки тому

    Nice video! It's amazing
    How did you do when you change the class ClassName and all the sane ClassName changes when you edit the ClassName?

  • @esthera3624
    @esthera3624 2 роки тому

    Amazing tutorial, you've helped me so much! and bonus your voice is so soothing

  • @amjadzayed5651
    @amjadzayed5651 2 роки тому

    many thanks bro 🌷
    can you make an email verification video!

  • @krystlertabinas3151
    @krystlertabinas3151 Рік тому

    I had bebasNeue inputted on the fonts, its already in pubspec and imported already but its not showing the same font as yours

  • @sammyjokes9613
    @sammyjokes9613 2 роки тому

    Hey man,
    Is your website created with flutter????
    If yes... Can you please make a tutorial on animate on scroll 🙏🙏🙏🙏

  • @ybminm
    @ybminm 2 роки тому

    Nice Work!

  • @BeaconofHopeNetwork
    @BeaconofHopeNetwork 2 роки тому

    waiting for the next video, i really want to learn firebase from you

    • @createdbykoko
      @createdbykoko  2 роки тому

      a lot of firebase stuff coming on the way!

  • @MohamedAhmed-ys2np
    @MohamedAhmed-ys2np 2 роки тому +1

    Very simple and helpful ❤️

  • @howed
    @howed 2 роки тому

    thank you for your great effort. Loves from Egypt ❤

    • @createdbykoko
      @createdbykoko  2 роки тому +1

      Thanks for the comment. Means a lot to me hehe. EGYPT!!! i love SALAH hahaha

  • @hamououyaba45
    @hamououyaba45 2 роки тому

    Nice work!!. thank you

  • @lukmanhakim4806
    @lukmanhakim4806 2 роки тому

    hey can you tell me name extension how to choose background color

    • @createdbykoko
      @createdbykoko  2 роки тому

      No extension Lukman, just go to the settings of VSCode and you can set the theme there

  • @aimeneharbi3913
    @aimeneharbi3913 2 роки тому

    Dude you amazing 🔥🔥 keep going i like your work 👌

  • @trevorfranks69
    @trevorfranks69 2 роки тому

    If i want to use TextFormField can i just simply change the TextField to TextFormField?

  • @aiwithqasim
    @aiwithqasim 2 роки тому

    Hey, Really Nice video. Can I get the code link of this video ?

  • @lamnhat76
    @lamnhat76 Рік тому

    Oh thank you for sharing

  • @css_master
    @css_master 2 роки тому +1

    you should use extract widgets because more clean code and you should get hintText and obscureText from outside
    for example :
    const Padding(
    padding: EdgeInsets.symmetric(horizontal: 25.0),
    child: _InputWidget(hintText: 'E-mail',),
    ),
    const SizedBox(height: 10,),
    const Padding(
    padding: EdgeInsets.symmetric(horizontal: 25.0),
    child: _InputWidget(hintText: 'Password', obscureText: true),
    ),
    **********************************************
    class _InputWidget extends StatelessWidget {
    const _InputWidget({
    Key? key, required this.hintText,
    this.obscureText = false,
    }) : super(key: key);
    final String hintText;
    final bool obscureText;
    @override
    Widget build(BuildContext context) {
    return Container(
    decoration: BoxDecoration(
    color: Colors.grey[200],
    border: Border.all(color: Colors.white),
    borderRadius: BorderRadius.circular(10),
    ),
    child: Padding(
    padding: const EdgeInsets.only(left: 20.0),
    child: TextField(
    obscureText: obscureText,
    decoration: InputDecoration(
    border: InputBorder.none,
    hintText: hintText,
    ),
    ),
    ),
    );
    }
    }

  • @garretthaynes1994
    @garretthaynes1994 2 роки тому

    What hotkey do you use in vscode to automatically format with new lines and tabs?

    • @createdbykoko
      @createdbykoko  2 роки тому

      Control + S = if you save it it automatically reformats for me

    • @garretthaynes1994
      @garretthaynes1994 2 роки тому

      @@createdbykoko yeah that’s what it looked like. I guess I am missing some formatting setting in vscode

    • @createdbykoko
      @createdbykoko  2 роки тому +1

      @@garretthaynes1994 try just updating VScode. I’m pretty i dont have any extra settings enabled

    • @garretthaynes1994
      @garretthaynes1994 2 роки тому

      I found the “format on save” setting in vscode

  • @yamilsaad9298
    @yamilsaad9298 2 роки тому +1

    I'm from Argentina. Thank so much for every video bro!!!

    • @createdbykoko
      @createdbykoko  2 роки тому

      My pleasure! I was supporting argentina in the world cup but tough loss haha 🇦🇷🇦🇷🇦🇷❤️

  • @FLEX110
    @FLEX110 2 роки тому

    Very helpful your video.Thank you brother❤

  • @achrafmhamdi7018
    @achrafmhamdi7018 2 роки тому

    Great work bro

  • @vibaal91
    @vibaal91 Рік тому +1

    What a great video, awesome how you did it look easy! thanks!

    • @createdbykoko
      @createdbykoko  Рік тому

      glad u like it alejandro! 💜 hows flutter going for you so far?

  • @h3w45
    @h3w45 7 місяців тому

    thumbnail and end result are not the same!

  • @VTechBroLive
    @VTechBroLive 2 роки тому

    Thanks mate!

  • @asif_imtiaz
    @asif_imtiaz 11 місяців тому

    Hey Mitch, been following you for a while. Your video thumbnail is misleading. You don't show how to make that frosted glass UI with Google and Apple login options. A bit disappointed, but thank you for the tutorial on the simple login.

  • @MultiSciGeek
    @MultiSciGeek 2 роки тому

    It's beautiful 😭

  • @aiFeeling
    @aiFeeling 2 роки тому

    Brother, good job.......❤️

  • @michaelchiz8055
    @michaelchiz8055 2 роки тому

    Well done. Nice

  • @fatmayildizakcicek
    @fatmayildizakcicek 2 роки тому

    good job👏

  • @emersonmartins894
    @emersonmartins894 2 роки тому

    Thank you bro! it helped me a lot!

  • @melissaosborne1892
    @melissaosborne1892 2 роки тому

    All your tutorials are the best!!!
    Please Mitch Koko, You mind sharing the designs link to this UI?

  • @acepyopi3531
    @acepyopi3531 2 роки тому

    thanks alot, it's easy to follow

  • @akedevjs
    @akedevjs 2 роки тому

    This video is master everyone love like this … he talk a little bit and coding immediately Good Course !!!!

    • @createdbykoko
      @createdbykoko  2 роки тому

      Haha glad you like it 👨🏽‍💻❤️

  • @cajetanrahul5747
    @cajetanrahul5747 2 роки тому

    loved it

  • @ivanov-sasha
    @ivanov-sasha 2 роки тому

    Awesome! Thanks great!

  • @siddharthroy6033
    @siddharthroy6033 2 роки тому

    how to use on pressed in login section

    • @createdbykoko
      @createdbykoko  2 роки тому

      Hey I want to help but can you clarify your question? Also you might want to check out my next Login video, it may answer your questions ua-cam.com/video/TkuO8OLgvkk/v-deo.html 👨🏽‍💻❤️

  • @Nanashi-rq7lk
    @Nanashi-rq7lk 3 місяці тому

    Perfect

  • @lantzshaw2864
    @lantzshaw2864 2 роки тому

    Thanks for your videos. Benefit a lot. And I really wanna know how to make the rotate animation of the mobile at the begin of the video.

  • @aiFeeling
    @aiFeeling 2 роки тому

    Can you give me a tutorial on instagram login? Plzzzzzz.

    • @createdbykoko
      @createdbykoko  2 роки тому

      yea sure. you want the instagram login UI?

    • @aiFeeling
      @aiFeeling 2 роки тому

      @@createdbykoko brother, I do not understand.🤔

  • @wakwak7903
    @wakwak7903 2 роки тому

    any tutorial for live phone in left side of your monitor?

  • @gameswelike4056
    @gameswelike4056 Рік тому

    I fall in love with ur video but when I practice as u did I get this error when entering the code for email textfield
    I expected to find ‘,’ is this an error of the vs code or am messing somewhere I can’t continue from there when I continue I get more error

  • @epi_sto_letes
    @epi_sto_letes 2 роки тому +1

    Is there a way to add a local jpeg, png, etc instead of Icon()?

    • @createdbykoko
      @createdbykoko  2 роки тому +1

      Of course! You can bring in an image using this widget ua-cam.com/video/6TmpjwKX9AU/v-deo.html

  • @Nechirvan_zone
    @Nechirvan_zone 2 роки тому

    Code?

  • @davidmtundi3400
    @davidmtundi3400 2 роки тому

    Hello, wow nice design, can i get the github link please, if you won't mind?

  • @satyain6567
    @satyain6567 2 роки тому

    Hi, can you please do one video on how to access native components like accessing camera to scan QR code, reading contacts, share on WebView page?
    Currently inside my flutter app it's rendering external webpages. Now, when user clicks on button on that webpage I would like to read/enable the above native components from that webpage.
    How can achieve this? Please advise!!

  • @abufaya4155
    @abufaya4155 2 роки тому

    bro plzz can u telll me what u use to auto align the code

  • @The2Coolest2
    @The2Coolest2 2 роки тому

    Why use padding margins etc when you can size the widgets based on the devices size. Is that a legitimate way to approach?

    • @createdbykoko
      @createdbykoko  2 роки тому

      How would you do that?

    • @The2Coolest2
      @The2Coolest2 2 роки тому

      @@createdbykoko I made a function that using the BuildContext object you can retrieve for example the width of the screen with MediaQuery. You can also get the screen height the same way and get the safearea height with some subtraction. Try googling some of what I wrote here since I can't write it all out on my phone, many stackexchange threads on it. I'm developing for multiple devices and both tablets and phones, so for example a padding inset of 20 is fine on the phone but on a tablet it looks wrong obviously.
      Though maybe I'm over complicating which is why I ask. I'm new to flutter dev. But have seen similar in other applications. My basic idea is I just want things to size based on the width and height of the current screen. Am I on the right track?

    • @createdbykoko
      @createdbykoko  2 роки тому

      @@The2Coolest2 oh I see, check out my responsive UI tutorial ua-cam.com/video/9bo1V9STW2c/v-deo.html

    • @The2Coolest2
      @The2Coolest2 2 роки тому

      @@createdbykoko Thanks. Will do!

  • @jash4305
    @jash4305 Рік тому

    what are the flutter extension you use in VsC....when you select bunch of options come

  • @zyltho
    @zyltho Рік тому

    i have alot of errors why?

    • @createdbykoko
      @createdbykoko  Рік тому

      What do the errors say?

    • @zyltho
      @zyltho Рік тому

      @@createdbykoko not on login ui sorry i got it in on app intruduction when i write class Homepage and stuff and the website i forgot what its called lollei it was something like that those commands where i write these website completely says error the red line show up under both error i mentioned before

  • @skyorizen
    @skyorizen 2 роки тому

    bro i love you bro so much

  • @taz1012
    @taz1012 2 роки тому +1

    I've added a little feature where you can turn password visibility on and off, found from another tutorial.
    isHiddenPassword = true
    obsecureText : isHiddenPassword
    InputDecoration(
    suffixIcon: IconButton(
    icon: isHiddenPassword == true
    ? Icon(
    Icons.visibility_off,
    color: Colors.grey,
    )
    : Icon(
    Icons.visibility,
    color: Colors.grey,
    ),
    onPressed: () {
    setState(() {
    isHiddenPassword = !isHiddenPassword;
    });
    }),
    border: InputBorder.none,
    hintText: 'Password'),

  • @Sofien_Steve
    @Sofien_Steve 2 роки тому +1

    not a good one, the next time make sure to include the creation of the loginpage in the tutorial too

    • @createdbykoko
      @createdbykoko  2 роки тому

      This is the UI for the login page. Here is the next video which covers the functionality/backend ua-cam.com/video/TkuO8OLgvkk/v-deo.html

  • @ai-bloggers
    @ai-bloggers 2 роки тому

    You are the best, bro

  • @veenakumari.s8251
    @veenakumari.s8251 2 роки тому

    Yesterday I implemented this code it was working fine but now the data is not storing in the firebase may I know why plss Rply

  • @akhabalasi6252
    @akhabalasi6252 2 роки тому

    Lovely bruh

  • @yonathanhailemelekot5238
    @yonathanhailemelekot5238 2 роки тому

    More than Amazing Thank you.

  • @chuckf1649
    @chuckf1649 2 роки тому

    nice!

  • @ToFu707
    @ToFu707 2 роки тому

    Very helpful, Thanks

  • @appdev7864
    @appdev7864 2 роки тому

    dont forget the "forget password ?"
    nice tuto tho ty

  • @ashokchandra4911
    @ashokchandra4911 Рік тому

    Perfect 👍

  • @mukins1352
    @mukins1352 2 роки тому

    Use "child: TextFormField" instead of "child: TextField" and you will see lots of warnings dissapear.

  • @sardorturdaliev3932
    @sardorturdaliev3932 2 роки тому

    Thanks

  • @mayurasandakalumsellapperu6778
    @mayurasandakalumsellapperu6778 2 роки тому

    ❤️❤️🔥

  • @YaqoobGameX
    @YaqoobGameX Рік тому +1

    Backgound music name please sir

  • @ai-bloggers
    @ai-bloggers 2 роки тому

    🚀🚀🚀🚀

  • @gededestrawan9997
    @gededestrawan9997 2 роки тому

    can u help me guys, i change the fontfamily using google font but not working? why? i already add google_font on pubspec and i already import but still not working, please help me guys

  • @chomanthapa
    @chomanthapa 2 роки тому

    What abt the thumbnail login screen ?

    • @createdbykoko
      @createdbykoko  2 роки тому

      It’s here newer video: ua-cam.com/video/Dh-cTQJgM-Q/v-deo.html

  • @veenakumari.s8251
    @veenakumari.s8251 2 роки тому

    Hii can u share the source code for firebase series..

  • @filipkaczmarek5454
    @filipkaczmarek5454 2 роки тому

    Gosh! Why I wasted time learning android and WPF when i could just learn flutter...
    First impression: commas everywhere lol

  • @shansalaayodya8149
    @shansalaayodya8149 2 роки тому

  • @fixitDart
    @fixitDart 2 роки тому

    When run in android, it's OK. but not run in the Windows Desktop. It's all about white screen.

    • @fixitDart
      @fixitDart 2 роки тому

      Exception has occurred.
      PlatformException (PlatformException(channel-error, Unable to establish connection on channel., null, null))

    • @createdbykoko
      @createdbykoko  2 роки тому

      @@fixitDart try this stackoverflow.com/questions/72880037/unhandled-exception-platformexceptionchannel-error-unable-to-establish-connec

  • @obong_samjoe
    @obong_samjoe 2 роки тому

    say hi if you new to flutter in 2022