🖥📱Responsive Dashboard UI • FLUTTER Tutorial ♡

Sdílet
Vložit
  • čas přidán 14. 07. 2022
  • 💬 Chat App w/ Notifications • mitchkoko.gumroad.com/l/ChatA...
    📱 Flutter Courses • mitchkoko.app/
    👨🏽‍💻 I'm coding a startup.. / mitchkoko
    / createdbykoko
    / createdbykoko
    / createdbykoko
    💰 Book Consultation Call • mitchkoko.gumroad.com/l/CallW...
    ~ ;
    Let me show you how to code a responsive app using Flutter! It will adjust automatically for mobile + tablet + desktop. I used a layout builder, aspect ratio and expanded widgets mainly to achieve this.
    ~ ;
    🖥 FULL SOURCE CODE • github.com/mitchkoko/responsi...
    ~ ;
    📱 INSTAGRAM • / createdbykoko
    📱 TIKTOK • / createdbykoko
    💻 GITHUB • github.com/mitchkoko/
    🖥 WEBSITE • mitchkoko.app/
    #responsivedesign #flutter #createdbykoko
  • Věda a technologie

Komentáře • 289

  • @createdbykoko
    @createdbykoko  Před 2 lety +23

    💬 Chat App w/ Notifications • mitchkoko.gumroad.com/l/ChatAppMasterclass
    📱 Flutter Masterclass • mitchkoko.app/
    🔥 I'm coding a startup.. www.patreon.com/mitchkoko

    • @mohamedabdelrehem7698
      @mohamedabdelrehem7698 Před 2 lety

      can you make tutorial for making button to add more buttons or container like
      (add new room)

    • @fadhilirimba6
      @fadhilirimba6 Před rokem

      Thanks bro,can you try creating an app reading from an API, e.g news app , livescore etc.

    • @greenhills7305
      @greenhills7305 Před rokem

      Thank you and love you 2 FC from Thailand.

  • @eboatwright_
    @eboatwright_ Před 2 lety +5

    Love it! Just finished your first responsive tutorial, and this one is a perfect follow-up! :D

  • @BlockCylinder
    @BlockCylinder Před 6 měsíci

    This is really well done. I know I'm going to be watching more of your tutorial videos in the coming weeks. Thank you.

  • @ubss
    @ubss Před rokem +1

    Thank you so much. Your smooth and calm voice, and clear and precise way of teaching make your tutorials of very very high standards.

  • @wikiwiki8924
    @wikiwiki8924 Před rokem +2

    Amazingly well explained with smooth flow

  • @nurhadigaming9363
    @nurhadigaming9363 Před rokem +3

    Fantastic tutorial, keep up the great videos!

  • @Zim_88
    @Zim_88 Před rokem +3

    Very useful and clean lesson.
    Thanks! You have a talent

  • @Andrew-mo9gy
    @Andrew-mo9gy Před rokem

    This was such a fantastic video, thank you so much. I loved the pace, explanation and overall objective of the tutorial. I learned a lot and am keen to watch more of your videos and learn more about flutter. You made my day, thank you 🙏

    • @createdbykoko
      @createdbykoko  Před rokem

      Hey Andrew haha glad it helps!! 👨🏽‍💻❤️

  • @budineonadv_banjarmasin
    @budineonadv_banjarmasin Před 2 lety +2

    With your videos my learning curve will shrink drastically. Thank you.

    • @createdbykoko
      @createdbykoko  Před 2 lety +2

      Haha my pleasure 😇 glad i could help. Let me know if u have any problems ✌🏾

  • @Pankhuri910
    @Pankhuri910 Před 8 měsíci

    This video was really helpful. As a designer I wanted to understand how devs create responsive layout in flutter to better understand and communicate with them. Thanks for sharing!

  • @Way_Of_The_Light
    @Way_Of_The_Light Před 2 lety +2

    Wow!! Very beautiful design 👏
    Keep posting videos bro! I’ll always watch and hit the ‘like’🙏

  • @bohdan8557
    @bohdan8557 Před 2 lety

    Wow! What a wonderful presentation! Subscribed, feeling so overwhelmed after seeing the amount of INTERESTING projects on your channel!))

  • @hathaichatschool3893
    @hathaichatschool3893 Před rokem

    Thank u so much, interested in starting so soft during quarintine and just need a place to get started, thx for the support

  • @sanskarsharma5954
    @sanskarsharma5954 Před rokem +5

    Hands down tNice tutorials is one of the best tutorials I've seen on any subject, ever! Clear, concise and incredibly informative and easy to follow.

  • @therock7014
    @therock7014 Před 7 měsíci

    Bro really love your idea
    and thank you for the code

  • @abasilis
    @abasilis Před rokem +1

    Thank you very much, nice done, easy to follow, very helpful and you explain very well. Thanks again!

  • @TaichordMusic
    @TaichordMusic Před rokem

    Thank you for this video, you teach in detail and easy to understand.

  • @riskzerobeatz
    @riskzerobeatz Před 2 lety

    Great tutorial. Thanks Mitch!

  • @mahmoudtokura
    @mahmoudtokura Před rokem

    Supper cool video, easy to follow and remember, You got a new subscriber.
    Looking forward to more full-stack responsive tutorials .

  • @nonefvnfvnjnjnjevjenjvonej3384

    man so good. the best thing is you build everything from scratch. that is how we know how to think. so many tutorials are like ok here is this giant amount of code i copy pasted.

  • @denn319
    @denn319 Před rokem +1

    Never knew that building responsive UI for all the platforms is this easy in Flutter. Thanks, Mitch! You're sick.

  • @matteobiancofiore7949

    works PERFECTLY!

  • @ghassanalkaraan
    @ghassanalkaraan Před 4 měsíci +1

    Thanks, I learned a lot.

  • @moammarqaddafi4858
    @moammarqaddafi4858 Před rokem

    oh man! oh man! You are great.. That is such a beautiful explanation!

  • @fahrezahendriansyah3331

    it worked! thank you so much!!

  • @sooanurag
    @sooanurag Před 11 měsíci

    some clear and concise explanation, Thanks

  • @SullyS255
    @SullyS255 Před 2 lety +3

    Thanks for this video, this is exactly what I need :D

    • @createdbykoko
      @createdbykoko  Před 2 lety +1

      no problem sally ❤️ glad i could help 👨🏽‍💻

  • @jeschinstad
    @jeschinstad Před rokem +24

    You are an incredibly good teacher, man! I've learned more from watching for for half an hour than I've done in three days. :) It's so tough to get going with programming again after many years of barely touching any code. A lot to learn, but this is really fun stuff. You make it that way. Thank you.

    • @createdbykoko
      @createdbykoko  Před rokem +2

      Hey Jo-Erlend! Thank you and no problem haha I’m glad I can help :) it sounds like you’re returning to programming!! That’s awesome to hear haha what programming did you used to do??

    • @jeschinstad
      @jeschinstad Před rokem +1

      @@createdbykoko: I was raised with programming. My father thought that the PC would one day win the race and become ubiquitous. So I've done all kinds of programming, but the most productive in recent times, was Vala+GTK, which I suppose is a reason why I like Flutter. In some ways very similar, except Vala still uses the "new" keyword and doesn't allow named parameters, and uses reference counting instead of garbage collection.

  • @thomasgormanable
    @thomasgormanable Před rokem +3

    Great tutorial! Feels so much more achievable now!

  • @MohamedAhmed-ys2np
    @MohamedAhmed-ys2np Před 2 lety

    Love you koko keep going 💜

  • @ululhasbi724
    @ululhasbi724 Před rokem +2

    Worked, thx

  • @sb-dor
    @sb-dor Před rokem +1

    you bro one of the best coder ever, thank you so mush my JIM bro, live a long life

  • @hanialhebshi9698
    @hanialhebshi9698 Před 3 měsíci

    So Useful .. Very organized design .. Thanks a lot for the nice illustration

  • @rain-er6537
    @rain-er6537 Před 8 měsíci

    I have never programmed in dart or used flutter, but this looks so simple and easy

  • @nuwandissanayake3831
    @nuwandissanayake3831 Před rokem

    Woow. Love it ❤

  • @felixanomym5524
    @felixanomym5524 Před 2 lety +2

    Hey bro, I love your tutorials they are so clean and easy to understand. Will you continue videos with firebase? Would love to see how you would do profile page view with user info that is currently logged in.

  • @Iqzen
    @Iqzen Před rokem

    when i typed in soft soft tutorial i did not expect it to be tNice tutorials good thank you so much aaaaaaa

  • @deriherdiana7332
    @deriherdiana7332 Před rokem

    yo bro, really thankya. Big respect

  • @alexandreduque4155
    @alexandreduque4155 Před 2 lety +1

    thank you man !! Needed for my project

    • @createdbykoko
      @createdbykoko  Před 2 lety

      yay no problem! good luck with your project! what are you making?

  • @yaderiuc7071
    @yaderiuc7071 Před rokem

    Legit! thanks a lot bro!

  • @mnc12004
    @mnc12004 Před 2 lety

    Well done Mitch. Awesome tutorial. Just got to add it to an existing, complex app.... 🤔😉

  • @junaidjameel5049
    @junaidjameel5049 Před rokem +1

    Thank you So much Sir!, you are doing such a great work. it help's me alot♥

  • @thefraternity-gamestudio6580

    MVP widget !!

  • @SuosSeyha
    @SuosSeyha Před rokem

    I'm really like your teaching.❤

  • @tempuser9560
    @tempuser9560 Před 4 měsíci

    awesome explaining. Thanks a lot .

  • @natashas.5388
    @natashas.5388 Před rokem +1

    Thanks a lot for this tutorial! Works like a charm :D I actually saw your tutorial on an instagram-like-app. I wonder how you would do that screens in responsive design. Maybe you could make a tutorial with two pages on that as well?

  • @rongzhaohua
    @rongzhaohua Před rokem

    God Damn, this tutorial is really helpful for a beginner like me.😁
    thank you very much.

  • @wasih19
    @wasih19 Před 2 lety

    I need this video from your youtube channel ..... and boooom you upload it...thanks, man❣️❣️

    • @createdbykoko
      @createdbykoko  Před 2 lety +1

      No problem 😊 haha glad i could help ❣️

  • @andrealexander7711
    @andrealexander7711 Před rokem

    Thanks bro! I did this to my computer and all is fine

  • @eduardperez6372
    @eduardperez6372 Před rokem

    Amazing tutorial... I got a really nice understand about responsive layout in flutter.

  • @waqasbashir7985
    @waqasbashir7985 Před rokem

    Great explanation

  • @rigasetya
    @rigasetya Před rokem

    Wanted to thank you for a great vid. Helped a lot. I've been trying to get going in both soft soft and didn't get very far. TNice tutorials vid helped a

  • @mcfahr3655
    @mcfahr3655 Před rokem

    Works good, tnx

  • @marksaing5644
    @marksaing5644 Před rokem

    up to now. Your soft is great too!

  • @abdulmuksith3391
    @abdulmuksith3391 Před rokem

    Thank you Brother ! Love it 😍

    • @createdbykoko
      @createdbykoko  Před rokem

      No problem abdul my brother. Glad i could help 👨🏽‍💻❤️

  • @metehanmete1210
    @metehanmete1210 Před rokem

    Your awesome bro love ya

  • @desktop6681
    @desktop6681 Před 2 lety

    😍Thanks for this video...

  • @chhayleang1830
    @chhayleang1830 Před rokem

    nice explanation Mitch

  • @vishwajeetbhagat9547
    @vishwajeetbhagat9547 Před rokem +2

    hey Mitch, great stuff, really appreciated, just have one request, can we have a tutorial to have multiple pages with this design? just wanted to learn how can we use navigation and reuse the same base structure across the pages.

  • @javar1987
    @javar1987 Před 2 lety

    thank you man.

  • @ariapham5865
    @ariapham5865 Před rokem

    overwhelming, but tNice tutorials was absolutely brilliant! Thank you!

  • @doniaelattar345
    @doniaelattar345 Před rokem

    thanks mate tNice tutorials was a big help

  • @aaaaaaaa-cu2jd
    @aaaaaaaa-cu2jd Před rokem

    softs it was really confusing but thanks to you I've gotten more professional at it!! ✌

  • @ras0907
    @ras0907 Před rokem

    Good, thanks for share!

  • @blackdockers
    @blackdockers Před 2 lety

    Awesome! Thank you.

  • @para07chabbi33
    @para07chabbi33 Před rokem

    Thanks man, I got the good habit of wanting to learn everytNice tutorialng before I start sotNice tutorialng (wNice tutorialch is impossible) tNice tutorials quick guide is what I

  • @aripwahyudi2447
    @aripwahyudi2447 Před rokem

    all the different elents together in a language that is universal. I've seen plenty of DAW tutorials being new, but tNice tutorials is by far the best so

  • @jamescockfield422
    @jamescockfield422 Před 10 měsíci +1

    Love the video. Has saved my frustration aha. I am just wondering how navigation would work if you are storing the drawer in the constants.dart file? I would just like to change a widgit that acts as a screen. Would appreciate a push in the right direction. cheers

  • @danialothman
    @danialothman Před 2 lety +1

    always classy design

  • @2bytecode
    @2bytecode Před 2 lety

    Thanks for the video, keep it up 👍

  • @ugurkorkmaz7968
    @ugurkorkmaz7968 Před rokem +1

    Good tt. Thanks man.

  • @storesx
    @storesx Před rokem +1

    Thanks for a good Tutorial , it is a mazing go ahead

  • @chind0na
    @chind0na Před rokem +1

    in 12:30 the file is constants.dart but the values aren't.
    A separate widget for the Drawer() makes mores sense.

  • @TienLenTrinh
    @TienLenTrinh Před rokem

    oh !What a great thing! this video helped me a lot in my graduation project!

    • @createdbykoko
      @createdbykoko  Před rokem

      Haha that’s great to hear! What did you make for your grad project?

    • @TienLenTrinh
      @TienLenTrinh Před rokem

      @@createdbykoko I created an app and website project to sell online

    • @createdbykoko
      @createdbykoko  Před rokem

      @@TienLenTrinh great work 👨🏽‍💻❤️😜

  • @rafales1525
    @rafales1525 Před 2 lety +1

    Tkank you bro 😉🙏 very well explain 😊

  • @yousour5112
    @yousour5112 Před 7 měsíci

    easy to understand and enjoyable , thz

  • @flutterkg
    @flutterkg Před rokem

    Thank you bro. you are cool

  • @mattjames4978
    @mattjames4978 Před rokem +2

    This is great. I'm surprised that there is no bootstrap-style responsive library as defaut in flutter.

  • @adrianomilhomens
    @adrianomilhomens Před 2 lety

    great!

  • @samgarg5228
    @samgarg5228 Před 2 lety

    great!!, i think i would use navigation rail for desktop instead of a drawer .

  • @mauziyyahannisa9103
    @mauziyyahannisa9103 Před rokem

    year. I want to get into making soft on desktop because it offers more features but I have just been preferring the softow of mobile apps

  • @marco_di
    @marco_di Před rokem

    Awesome 👍😁
    If I drag the image smaller than the 4 blue squares in the desktop view, I get the overflow error message. How to set a minimum window size?

  • @rivella99
    @rivella99 Před 9 měsíci +1

    So for each follow up page your project has (in your case settings and message) you do the same again by creating 3 versions of it, one for each display type?

  • @NadyNasserTradingClub

    can we add flipped too ??

  • @7thRichard
    @7thRichard Před rokem

    Thanks alot mitch! I really needed this 🙌. You only explained width responsiveness, what about height?

  • @sikkicoding
    @sikkicoding Před rokem

    Zabardast & Thank you😍

  • @andresprada1982
    @andresprada1982 Před 2 lety

    Hi bro, special greetings, let me ask you: which program do you use for edit your intro's videos emulating phones or all u want? I appreciate your answer. perfect channel

  • @Hazara_boy
    @Hazara_boy Před rokem +1

    what do you think of Screen Util Package in flutter?

  • @SaifAli-zf5qi
    @SaifAli-zf5qi Před 2 lety +1

    thanks i really need this tutorial..

    • @createdbykoko
      @createdbykoko  Před 2 lety +2

      haha awesome Saif glad i could help. let me know if u need extra help

    • @SaifAli-zf5qi
      @SaifAli-zf5qi Před 2 lety

      @@createdbykoko yes brother, i had created a school app clone and when i rotate screen horizontaly i get widget overflow..now i will try your guide through this tutorial and then i will let you know.. thanks ❤

  • @drikagalbiati
    @drikagalbiati Před rokem

    needed to go learn by acting!

  • @lasindunuwanga5292
    @lasindunuwanga5292 Před 5 měsíci

    thanks

  • @mehmetakifsayrm4152
    @mehmetakifsayrm4152 Před rokem

    Here is my question,
    If you want to put ıcons, texts, images how they reacts ? How should I resize those ?

  • @Spin-jd1pm
    @Spin-jd1pm Před rokem

    Am a biginner but with the tutorials bro am like i started years back my friends must see tNice tutorials too thumps up

  • @ajinkyajoshi9402
    @ajinkyajoshi9402 Před 2 lety

    How to create responsive UI for tablet in Portrait and Landscape. like separate UI if we hold tablet vertically and Horizontally.

  • @niyazitoros9190
    @niyazitoros9190 Před rokem

    Thanks for great tutorial. My question is why didnt you use the responsive_framework? What is the main diffrences in your approch? Thnaks 🙏

  • @ggggggg0000
    @ggggggg0000 Před rokem

    this is the best flutter tutorial i've watched so far

    • @createdbykoko
      @createdbykoko  Před rokem

      Haha nice glad u like it 👨🏽‍💻❤️

  • @capitalnews1436
    @capitalnews1436 Před 2 lety

    you are great awesome, best . thankyou so so so much

  • @user-rx2vk7qo5y
    @user-rx2vk7qo5y Před 5 měsíci +1

    is it fine because we have same multiple screen in mobile and web and according to you create three different-2 screen for each one? Please suggest.

  • @yumyum_99
    @yumyum_99 Před rokem +1

    If using many scafold build that will rebuild everytime using layotbuilder, does it takes more space as in storage? because more code, does it increase app storage size?

  • @alirezahasani263
    @alirezahasani263 Před 7 měsíci

    nice