🖥📱Responsive Dashboard UI • FLUTTER Tutorial ♡

Поділитися
Вставка
  • Опубліковано 14 лип 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
  • Наука та технологія

КОМЕНТАРІ • 289

  • @createdbykoko
    @createdbykoko  2 роки тому +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 2 роки тому

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

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

      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.

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

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

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

  • @BlockCylinder
    @BlockCylinder 6 місяців тому

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

  • @Pankhuri910
    @Pankhuri910 8 місяців тому

    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!

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

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

  • @jeschinstad
    @jeschinstad 2 роки тому +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 роки тому +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.

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

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

    Amazingly well explained with smooth flow

  • @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!! 👨🏽‍💻❤️

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

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

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

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

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

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

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

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

  • @Zim_88
    @Zim_88 Рік тому +3

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

  • @nurhadigaming9363
    @nurhadigaming9363 Рік тому +3

    Fantastic tutorial, keep up the great videos!

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

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

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

      haha thanks, you are appreciated 🙏❤️

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

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

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

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

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

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

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

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

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

  • @felixanomym5524
    @felixanomym5524 2 роки тому +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.

  • @rain-er6537
    @rain-er6537 8 місяців тому

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

  • @vishwajeetbhagat9547
    @vishwajeetbhagat9547 Рік тому +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.

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

    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?

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

    some clear and concise explanation, Thanks

  • @sb-dor
    @sb-dor Рік тому +1

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

  • @thomasgormanable
    @thomasgormanable Рік тому +3

    Great tutorial! Feels so much more achievable now!

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

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

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

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

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

    Great tutorial. Thanks Mitch!

  • @therock7014
    @therock7014 8 місяців тому

    Bro really love your idea
    and thank you for the code

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

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

    Worked, thx

  • @jamescockfield422
    @jamescockfield422 11 місяців тому +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

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

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

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

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

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

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

  • @ghassanalkaraan
    @ghassanalkaraan 5 місяців тому +1

    Thanks, I learned a lot.

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

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

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

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

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

    it worked! thank you so much!!

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

    yo bro, really thankya. Big respect

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

    works PERFECTLY!

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

    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

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

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

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

      No problem 😊 haha glad i could help ❣️

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

    I'm really like your teaching.❤

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

    Great explanation

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

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

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

    Love you koko keep going 💜

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

      Thanks mohamed 👨🏽‍💻❤️❤️

  • @rivella99
    @rivella99 10 місяців тому +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?

  • @thefraternity-gamestudio6580

    MVP widget !!

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

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

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

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

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

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

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

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

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

    thank you man !! Needed for my project

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

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

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

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

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

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

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

    nice explanation Mitch

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

    up to now. Your soft is great too!

  • @7thRichard
    @7thRichard 2 роки тому

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

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

    awesome explaining. Thanks a lot .

  • @aaaaaaaa-cu2jd
    @aaaaaaaa-cu2jd Рік тому

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

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

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

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

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

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

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

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

  • @user-rx2vk7qo5y
    @user-rx2vk7qo5y 6 місяців тому +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.

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

  • @SamOdiagbe
    @SamOdiagbe 9 місяців тому

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

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

    Legit! thanks a lot bro!

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

    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

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

  • @DiyaLalDileepLal
    @DiyaLalDileepLal 9 місяців тому

    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)?

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

    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

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

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

    Do you have any tutorial series to learn flutter from beginner -> intermediate -> advance?

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

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

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

    always classy design

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

      always a great supporter Danial! thank you

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

    thanks mate tNice tutorials was a big help

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

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

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

    Can you make a video on how to convert a existing website to a responsive disign for mobile, tablet and website which is in flutter. It would be good if you used responsive framework.

  • @Allinone...786
    @Allinone...786 8 місяців тому +1

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

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

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

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

    Your awesome bro love ya

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

    what do you think of Screen Util Package in flutter?

  • @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)?

  • @mrinmoysarkar.official
    @mrinmoysarkar.official 11 місяців тому

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

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

    Woow. Love it ❤

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

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

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

    Thank you Brother ! Love it 😍

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

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

  • @RatibTM
    @RatibTM 18 днів тому

    Awesome! How to implement the responsive drawer in each page?

  • @Spin-jd1pm
    @Spin-jd1pm Рік тому

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

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

    😍Thanks for this video...

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

    Works good, tnx

  • @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 👨🏽‍💻❤️😜

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

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