Build a Fully Responsive Modern Login UI with Flutter

In this Flutter Tutorial, you'll learn about designing a Responsive Cross Platform Dark Theme Login UI in Flutter! This UI design works properly on Android, iOS, Desktop & Web! Let me know if you would like to see more of UI designs.
Source Code: github.com/RivaanRanawat/flut...
Design Credits: Oliver Cederborg
Original Design Link: dribbble.com/shots/15123314-S...
Resources:
Assets - github.com/RivaanRanawat/flut...
Colors - github.com/RivaanRanawat/flut...
Connect With Me Here:
Instagram: / optimalcoding
GitHub: github.com/rivaanranawat
Linkedin: / rivaan-ranawat
Facebook: / rivaan.ranawat
Mail: namanrivaan@gmail.com
Medium: / namanrivaan
Twitter: / ranawatrivaan

Пікірлер: 79

  • @H3xOv3rflow
    @H3xOv3rflow Жыл бұрын

    Thanks, bro for contributing to the flutter community ❤️

  • @RivaanRanawat

    @RivaanRanawat

    Жыл бұрын

    Thanks for the support 💪

  • @mayursmahajan
    @mayursmahajan Жыл бұрын

    We would love to see more UI and specially responsive UI videos

  • @RivaanRanawat

    @RivaanRanawat

    Жыл бұрын

    Thanks for letting me know Mayur! More to come for sure!

  • @magento3114

    @magento3114

    Жыл бұрын

    @@RivaanRanawat please do flutter twitter Clone video

  • @RivaanRanawat

    @RivaanRanawat

    Жыл бұрын

    @@magento3114 👀

  • @randomcsguy2065
    @randomcsguy2065 Жыл бұрын

    on fire this month 🔥🔥🔥🔥🔥🔥🔥🔥

  • @RivaanRanawat

    @RivaanRanawat

    Жыл бұрын

    Thank you!

  • @jaafarty2673
    @jaafarty26732 ай бұрын

    quick question bro great video can i use this UI to add to it a backend and make it a login page for my app? is it possible

  • @sumitbanwakade9750
    @sumitbanwakade9750 Жыл бұрын

    You are doing Great!! Keep it Up

  • @RivaanRanawat

    @RivaanRanawat

    Жыл бұрын

    Thank you so much!!

  • @anonimanonim1223
    @anonimanonim12235 ай бұрын

    What type of database did you use in this tutorial for example sqlLite or firebase?

  • @shreeshree129
    @shreeshree129 Жыл бұрын

    Thanks for sharing your knowledge bro... Running Successfully Stay blessed❤

  • @RivaanRanawat

    @RivaanRanawat

    Жыл бұрын

    Thank you very much!

  • @saiphaneeshk.h.5482
    @saiphaneeshk.h.5482 Жыл бұрын

    Awesome tutorial. Is it possible to make a video on using single routing / navigation for both app and web?

  • @RivaanRanawat

    @RivaanRanawat

    Жыл бұрын

    Noted! Thanks for the request

  • @bensosfrequents
    @bensosfrequents Жыл бұрын

    Followed tutorial from start to the end replicating everything but at the end, my design isn't responsive on browser resize 😅 may be i missed something. This is my fourth day learning flutter from android java development. Majority of systaxes are similar to java so i have no much problems mastering the code. I will need two more days of practice and I launch my first professional app in flutter

  • @Roopam_Barman_CSE
    @Roopam_Barman_CSE Жыл бұрын

    It did take 3 hours for me to finish it😂 , a balance of fun and frustrating , the result is what made everything worth it. Issues faced: my browser/device wasn't showing the svg icons after 3-4 restarts it did , this is where I wasted my 1h , rest in setting proper height and width , also setting gradient to icons as well and the whole project.

  • @deathgod_69
    @deathgod_69 Жыл бұрын

    Pyaar he Pyaar ❤️

  • @RivaanRanawat

    @RivaanRanawat

    Жыл бұрын

    Thanks 🙏

  • @sangaranaarayananr3134
    @sangaranaarayananr3134 Жыл бұрын

    Hey i am new to flutter. I have a doubt bro. For building responsive website i am using layout builder with future builder but my future builder is calling everytime when I resize. How should i do this and what else is the approach

  • @pranavaggarwal471
    @pranavaggarwal471 Жыл бұрын

    Great video man. Okay so i created this following your video. Now i want to create the dashboard and other pages also. I want to know how do you get the images from the dribbble designs?? Like the image in the asset folder. How to get that image from the dribbble design? I want the other bg images but I don't know how to. Can you help?

  • @RivaanRanawat

    @RivaanRanawat

    Жыл бұрын

    I'm not sure. I asked the owner of the Dribbble design for permissions to use his design and he was very kind to send the assets as well.

  • @ShalimarfurnitureMart
    @ShalimarfurnitureMart5 ай бұрын

    Your videos is too good❤

  • @ansh_nx
    @ansh_nx Жыл бұрын

    Brother, from where did you learn Flutter, please tell me ?

  • @Radhe_Cinema21
    @Radhe_Cinema21 Жыл бұрын

    How to change Text field inputed text color

  • @bigbe891218
    @bigbe891218 Жыл бұрын

    thanks i love your videos bro!

  • @RivaanRanawat

    @RivaanRanawat

    Жыл бұрын

    Thank you! Glad you like them!

  • @ShalimarfurnitureMart
    @ShalimarfurnitureMart5 ай бұрын

    Scrolling on Chrome text box is scrolling down How to fix this problem

  • @rr2r2r2ra
    @rr2r2r2ra Жыл бұрын

    Awesome!

  • @RivaanRanawat

    @RivaanRanawat

    Жыл бұрын

    Thanks!

  • @onurs.594
    @onurs.594 Жыл бұрын

    That was issue for me, when i use mediaquery its not work for really small phones. I tried getting phone pixels and try it but didnt work also i tried getting size and didnt work (of course i use expanded or scrollview) but i wonder why you didn't use mediaquery and give some random numbers? Every single developer says "use mediaquery".

  • @RivaanRanawat

    @RivaanRanawat

    Жыл бұрын

    Haven't used MediaQuery here as there's no big sizes to be concerned about. For instance, the button size should remain the same irrespective of whether it is used on something like a PC or mobile. If I use MediaQuery for it, it will look shabby with bad UX. The button might look small on Mobile and good on PC. It's not a compulsory rule to use MediaQuery. Imo, It should be used when it's for sizes that matters, like if we have admin panel and want cards to be displayed. The cards' sizes will shrink as the screen gets smaller and smaller. I hope you're getting my point. Next Responsive UI might be on Admin Dashboard. Things might get clearer there as I'll use MediaQuery/ LayoutBuilder.

  • @kamil_supabase_enjoyer
    @kamil_supabase_enjoyer Жыл бұрын

    Why 'or' text is white color?

  • @bilalbilu1661
    @bilalbilu1661 Жыл бұрын

    Bro can you create a video about ui design tips what should I check when I create a ui

  • @RivaanRanawat

    @RivaanRanawat

    Жыл бұрын

    Great idea Bilal, will do!

  • @karimovanar
    @karimovanar Жыл бұрын

    Can you do a cargo project or a full project?

  • @RivaanRanawat

    @RivaanRanawat

    Жыл бұрын

    Noted!

  • @bhavneetsingh9811
    @bhavneetsingh98112 ай бұрын

    Amazing video

  • @RivaanRanawat

    @RivaanRanawat

    2 ай бұрын

    Thanks!

  • @seamensclubltd7603
    @seamensclubltd7603 Жыл бұрын

    Cool!!!!!

  • @AniMatrixXD
    @AniMatrixXD Жыл бұрын

    Interesting video, but what's with the password-field? The characters are not encrypted

  • @RivaanRanawat

    @RivaanRanawat

    Жыл бұрын

    Ah, good catch! You can use `obscureText: true` to make the password field encrypted.

  • @alwinvj6487
    @alwinvj6487 Жыл бұрын

    Thanks a lot for this video Could you guide me to get more svg files for flutter like logo for instagram and all?

  • @RivaanRanawat

    @RivaanRanawat

    Жыл бұрын

    Install the Svg Grabber Chrome Extension. It will get you all the svgs for a webpage!

  • @alwinvj6487

    @alwinvj6487

    Жыл бұрын

    Thanks a lot

  • @TrikNgonlen
    @TrikNgonlen Жыл бұрын

    A W E S O M E !

  • @RivaanRanawat

    @RivaanRanawat

    Жыл бұрын

    🔥🔥

  • @vikashtiwari8360
    @vikashtiwari8360 Жыл бұрын

    Thank you bhaiya

  • @RivaanRanawat

    @RivaanRanawat

    Жыл бұрын

    Pleasure!

  • @swatiupadhyay8052
    @swatiupadhyay805210 ай бұрын

    Which text editor you're using here?

  • @syit_334_vaibhav3

    @syit_334_vaibhav3

    29 күн бұрын

    notepad

  • @officens00
    @officens00 Жыл бұрын

    Rivaan

  • @RivaanRanawat

    @RivaanRanawat

    Жыл бұрын

    🙇‍♂️

  • @SaifullahKhan72437
    @SaifullahKhan72437 Жыл бұрын

    look cool

  • @RivaanRanawat

    @RivaanRanawat

    Жыл бұрын

    Thank you!

  • @szyszak9424
    @szyszak9424 Жыл бұрын

    I looking forward to telegram flutter clone :D

  • @RivaanRanawat

    @RivaanRanawat

    Жыл бұрын

    We already have WhatsApp Clone published on the channel!

  • @mohammadpanahi9408
    @mohammadpanahi9408 Жыл бұрын

    👍👍 Very Good

  • @RivaanRanawat

    @RivaanRanawat

    Жыл бұрын

    Thank you Mohammad!

  • @rakshithgowda8782
    @rakshithgowda878210 ай бұрын

    helpfull

  • @SpeediBoi
    @SpeediBoi Жыл бұрын

    Do you have any plane to make this a working login form?

  • @youngapolIo

    @youngapolIo

    Жыл бұрын

    you can do that easily with firebase and be already got a video about all the login methods

  • @SpeediBoi

    @SpeediBoi

    Жыл бұрын

    @@youngapolIo I know we can do it by firebase either node js and mongo db but I commented because of those who are beginner.

  • @RivaanRanawat

    @RivaanRanawat

    Жыл бұрын

    Hmm, what do you want me to cover in that video? As Matt said, I think you can combine both of these videos to have a working Login Section.

  • @nullcodeer
    @nullcodeer Жыл бұрын

    thanks sir

  • @RivaanRanawat

    @RivaanRanawat

    Жыл бұрын

    Most welcome

  • @hamzashehzad7273
    @hamzashehzad7273 Жыл бұрын

    Bro plz make more vedios on responsiveness

  • @RivaanRanawat

    @RivaanRanawat

    Жыл бұрын

    More to come Hamza!

  • @bossphotography8821
    @bossphotography8821 Жыл бұрын

    Bro please make a home services app with backend.. Love from Bangladesh 🇧🇩

  • @RivaanRanawat

    @RivaanRanawat

    Жыл бұрын

    Noted!

  • @faheemahmad3957
    @faheemahmad3957 Жыл бұрын

    please do full time youtube!

  • @RivaanRanawat

    @RivaanRanawat

    Жыл бұрын

    Haha, thank you so much Faheem! More to come!

  • @magento3114
    @magento3114 Жыл бұрын

    Please upload twitter Clone video

  • @RivaanRanawat

    @RivaanRanawat

    Жыл бұрын

    Have it in line, will be out very soon.

  • @hamzashehzad7273
    @hamzashehzad7273 Жыл бұрын

    And ui

Келесі