🖥📱Responsive Dashboard UI • FLUTTER Tutorial ♡

Поделиться
HTML-код
  • Опубликовано: 14 июл 2022
  • 📱 Flutter Courses • mitchkoko.app/
    💰 Hire Me / Book Consultation Call • mitchkoko.gumroad.com/l/CallW...
    🎧 Flutter Pod • / mitchkoko
    ~ ;
    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
  • НаукаНаука

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

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

    🔥📱 Flutter Templates • mitchkoko.app/
    🥷🏽📱 Minimal Social App • mitchkoko.gumroad.com/l/MinimalSocialApp
    💰📱 Minimal Ecommerce App • mitchkoko.gumroad.com/l/MinimalEcommerceApp

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

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

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

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

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

      Thank you and love you 2 FC from Thailand.

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

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

  • @ubss
    @ubss Год назад +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.

  • @jeschinstad
    @jeschinstad Год назад +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  Год назад +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 Год назад +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.

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

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

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

    Amazingly well explained with smooth flow

  • @sanskarsharma5954
    @sanskarsharma5954 Год назад +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.

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

    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!

  • @Andrew-mo9gy
    @Andrew-mo9gy Год назад

    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  Год назад

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

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

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

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

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

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

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

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

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

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

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

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

      haha thanks, you are appreciated 🙏❤️

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

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

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

    Fantastic tutorial, keep up the great videos!

  • @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.

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

    Great tutorial! Feels so much more achievable now!

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

    Bro really love your idea
    and thank you for the code

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

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

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

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

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

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

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

      My pleasure glad it helps u 💜💜💜

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

    Great tutorial. Thanks Mitch!

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

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

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

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

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

    some clear and concise explanation, Thanks

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

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

  • @sb-dor
    @sb-dor Год назад +1

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

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

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

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

    it worked! thank you so much!!

  • @rain-er6537
    @rain-er6537 6 месяцев назад

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

  • @MohamedAhmed-ys2np
    @MohamedAhmed-ys2np Год назад

    Love you koko keep going 💜

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

      Thanks mohamed 👨🏽‍💻❤️❤️

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

    I'm really like your teaching.❤

  • @felixanomym5524
    @felixanomym5524 Год назад +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.

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

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

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

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

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

    works PERFECTLY!

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

    nice explanation Mitch

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

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

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

    Thanks, I learned a lot.

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

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

  • @natashas.5388
    @natashas.5388 Год назад +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?

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

    yo bro, really thankya. Big respect

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

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

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

    Worked, thx

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

    thank you man !! Needed for my project

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

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

  • @rivella99
    @rivella99 8 месяцев назад +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?

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

    up to now. Your soft is great too!

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

    Great explanation

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

    Legit! thanks a lot bro!

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

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

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

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

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

      No problem 😊 haha glad i could help ❣️

  • @thefraternity-gamestudio6580
    @thefraternity-gamestudio6580 Год назад

    MVP widget !!

  • @AngelLopez-nc2ib
    @AngelLopez-nc2ib Год назад

    Quick question, you probably answered it in the video but didn’t catch it. If I wanted to have separate pages would I code it within the (desktop,tablet,mobile) file and just have the push/pop to navigate to that view?

  • @yumyum_99
    @yumyum_99 Год назад +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?

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

    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

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

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

  • @tempuser9560
    @tempuser9560 3 месяца назад

    awesome explaining. Thanks a lot .

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

    Mitch,
    How do we add custom cards in the tablet and desktop layouts?
    Mobile is fine but the custom cards just don't work the way do in the video layout

  • @vishwajeetbhagat9547
    @vishwajeetbhagat9547 11 месяцев назад +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.

  • @jamescockfield422
    @jamescockfield422 9 месяцев назад +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

  • @user-rx2vk7qo5y
    @user-rx2vk7qo5y 4 месяца назад +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.

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

    Hey Mitch, curious question, how are you able to make the apps appear on the 3d Iphone

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

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

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

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

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

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

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

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

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

    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

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

    How will I make all my pages responsive in a flutter app? Should I implement the responsive layout code in every pages or will it inherit the responsive layout from its parent(main.dart)?

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

    Hey, how would you integrate go_router in this kind of responsive app? i made something similar but i have truble doing so

  • @aaaaaaaa-cu2jd
    @aaaaaaaa-cu2jd Год назад

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

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

    Thank you Brother ! Love it 😍

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

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

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

    but how do you do this if you have many routes in the nav bar like: settings page, home page, search page, etc. how do you make it all responsive in one code/class

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

    Woow. Love it ❤

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

    Is it necessary to use the screen util plugin for responsive design?

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

    always classy design

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

      always a great supporter Danial! thank you

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

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

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

    Your awesome bro love ya

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

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

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

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

  • @Allinone...786
    @Allinone...786 6 месяцев назад +1

    How to make a text responsive? Mean if screen changes than how text size changes?

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

    what do you think of Screen Util Package in flutter?

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

    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?

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

    thanks mate tNice tutorials was a big help

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

    So i must to create 3 different screens? Can we use same concept like web dev (boostrap)? just define col-sm-12 (mobile) and col-md-6 (desktop)?

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

    😍Thanks for this video...

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

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

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

    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

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

    thank you man.

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

    How to use this ResponsiveLayout for Mulitple Screens ? for Each Screen We have to Create ResponsiveLayout Class ?

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

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

  • @mrinmoysarkar.official
    @mrinmoysarkar.official 9 месяцев назад

    23:07 Can we add a little animation to make the transition look smooth ?

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

    Works good, tnx

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

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

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

    I downloaded the program but everytNice tutorialng still says trial version on it??

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

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

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

    There is no option to read the device parameter and adapt to mobile phone, tablet or browser?
    This constant number not felt right way to do (talking as a not mobil app developer)

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

    Awesome! Thank you.

  • @2bytecode
    @2bytecode Год назад

    Thanks for the video, keep it up 👍

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

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

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

    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

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

    Zabardast & Thank you😍

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

    Good tt. Thanks man.

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

    Good, thanks for share!

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

    Thanks Mitch, how did you run this on a Mac window?

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

    Bro i want to make dashboard in flutter web bhut the problem is that i navigate through drawer to navigate to another screen the drawer will stuck there