🖥📱RESPONSIVE DESIGN • Flutter Tutorial

Sdílet
Vložit
  • čas přidán 1. 12. 2021
  • 📱 Flutter Courses • mitchkoko.app/
    💰 Hire Me / Book Consultation Call • mitchkoko.gumroad.com/l/CallW...
    🎧 Flutter Pod • / mitchkoko
    ~ ;
    This is a must know for every Flutter developer! Since Flutter is a cross platform framework, dealing with different screen sizes smoothly is essential~
    C O D E
    github.com/mitchkoko/responsi...
    S O C I A L
    instagram: / createdbykoko
    github: github.com/mitchkoko/
    website: mitchkoko.app/
    facebook: / createdbykoko
    patreon: / mitchkoko
    #responsivedesign #flutter
  • Věda a technologie

Komentáře • 165

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

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

  • @FlutterMapp
    @FlutterMapp Před 2 lety +171

    Mitch, your thumbnail is great! Thanks for sharing with the Flutter community 👏

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

      My pleasure ✌🏾❤️

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

      @@createdbykoko Ah Such a great thumbnanil

    • @morningstar3304
      @morningstar3304 Před rokem +1

      Hi ,, how are you hope you will be fine as many people are earning by your effort so people's prayers are definitely with you .. i want you to give us a free copy of Zero to Hero playlist as i could learn more about state management fire base authentication and publishing app on Android and Ios Store as well .. Hope you may understand that i am stuck in middle of your playlist. thanks

  • @HermanPalmgren
    @HermanPalmgren Před 2 lety +24

    I have been making some programming videos myself, and I must say that your language, tone and video style is so clear. Great video!

  • @EmanueleTozzato
    @EmanueleTozzato Před rokem

    Professor Koko just became my hero tutorialist. Perfect speed, clear and effective speech, pleasant colors, 10+

  • @vothanhbinh2k
    @vothanhbinh2k Před 2 lety +10

    engaging voices, quality videos, and useful content, keep these series going sir

  • @arafathussain851
    @arafathussain851 Před rokem +1

    Very clean and clear explanation, thank you for the video!

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

    You just earn new subscriber bro, keep up with the flutter content, Love your videos!

  • @rishabhvishwakarma5745

    you just explained one of the most imp. and kind of difficult topic in min.. , just wow thanks man😎😎

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

    best channel over the tube for flutter learning
    very good job mate

  • @nevillelam7999
    @nevillelam7999 Před rokem +2

    Thank you for giving such a quick but informative tutorial!

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

    So simple and handy tutorial. Thanks man 🖤

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

    Awesome and aesthetic explanation. Thank you!

  • @maneeshapte6883
    @maneeshapte6883 Před 2 lety

    This was an extremely helpful video!! Thank you

  • @moazelsawaf2000
    @moazelsawaf2000 Před 2 lety

    Thanks, simple and clear ❤️

  • @RiccardoGabellone
    @RiccardoGabellone Před 2 lety

    Right quality content at right moment 💪🏻 keep going

  • @positiveknowledge4045

    aaah you're doing great I saw your website and it was fantastic 💯👌👍

  • @sewbeta4334
    @sewbeta4334 Před 2 lety

    Great video. You are a good teacher : Simple, clear and exhaustive.

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

    This is awesome! You make everything so simple

  • @cnorse
    @cnorse Před 2 lety

    Please do make more of this!

  • @rahulranjansingh2679
    @rahulranjansingh2679 Před 2 lety

    Short and Easy thanks 👏

  • @martinpalmer2036
    @martinpalmer2036 Před rokem +2

    Honestly Dude, Simple! Clear! Concise! Every other example I've seen is too complex and seems like the Author is trying to show how big his brain/ego is (i.e. Google...) . Totally awesome!

    • @createdbykoko
      @createdbykoko  Před rokem +1

      Haha martin! Glad it helps you! 💜💜 how is Flutter going for u so far?

    • @martinpalmer2036
      @martinpalmer2036 Před rokem

      @@createdbykoko So far so good! I have a small number of customers and am getting better at it every day (thanks to several of your tutorials). I think you're in Australia? I live in the Seattle area but have family in Surfers Paradise 🙂

  • @xixnineteen6322
    @xixnineteen6322 Před rokem

    Thank you, it works perfect!

  • @rahuljamba5846
    @rahuljamba5846 Před 2 lety

    Excellent Mitch !!!! 💥

  • @TGR-wf6gd
    @TGR-wf6gd Před 2 lety +2

    Awesome and concise video. What is your take on packages like responsive_framework and would you prefer using those over the approach you demonstrated in this video?

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

    This is awesome. Thank you.

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

    This was a clear, well explained video thanks.

  • @Neerajkumar-xl9kx
    @Neerajkumar-xl9kx Před rokem

    I have subscribed you for this, loved it

  • @omkarp9943
    @omkarp9943 Před rokem

    I hope you will be having 1M subscribers soon !!

  • @autumnuniverse1940
    @autumnuniverse1940 Před 2 lety

    This is beautiful

  • @theguanche
    @theguanche Před rokem

    Can you link the setuper channel, soft and track, so you don't have to color and rena 3 tis ? Btw aweso video!

  • @cordroy1846
    @cordroy1846 Před rokem

    так просто и так понятно, спасибо за такое крутое видео )

  • @user-ep1jm6gm6q
    @user-ep1jm6gm6q Před rokem +1

    man your explanation is just legendary

    • @createdbykoko
      @createdbykoko  Před rokem +1

      haha Johan you are too nice. Your words mean a lot to me 💜

  • @ayoubelbadaoui7000
    @ayoubelbadaoui7000 Před 2 lety

    clean work

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

    Thanks for the video, it's easy to understand 👍🏼

  • @izmir175
    @izmir175 Před 2 lety

    Bro you are awesome!

  • @abasilis
    @abasilis Před 10 měsíci

    Thanks for this awesome video, as always. Something that happened to me is that I used the structured way method for a project, but what I turn my phone in landscape mode, the width is 800.6, should I control the layout using the MediaQuery.of(context).orientation to control that?, or there is a more convenient way? Thank you very much fro your time, I really appreciate it!

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

    Muito bom, obrigado por compartilhar conhecimento.👍

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

    love your tutorials❤❤❤❤

  • @sudipraaz
    @sudipraaz Před 2 lety

    great work + greate contribution to make it easily understandable.
    Keep up the good work

  • @Sebastian-cz3vk
    @Sebastian-cz3vk Před 2 lety +2

    ​ @Mitch Koko , So because my app is mostly UI i basically double or 3x the code and modify for tablet and desktop devices. Doesn't get the app size too big ?

  • @sundaramoorthykuppuswamy2745

    Such a simple and great content buddy ; )

  • @MrAhbill1
    @MrAhbill1 Před 2 lety

    just started to learn fluttern from native ios and android background, didn't realize there's a code snippet if you write "stf" or "stl" haha. Thanks mate!

    • @createdbykoko
      @createdbykoko  Před 2 lety

      No problem haha yeah you’re going to need to those shortcuts :)

  • @luisgonzaloguarnizogarcia7587

    Thanks for sharing

  • @AmirBaruchPreciseAsteroid

    Great video! learned a lot. quick question: I am assuming your are using chrome for live preview and the results seem to update immediately as you save. I thought hot reload is not supported with web. Do you use a different setup?

    • @Terandium
      @Terandium Před rokem

      Bit late but I think web has hot reload support, otherwise just use the windows/macos desktop variant ^^

  • @namanpatel252
    @namanpatel252 Před rokem +1

    Hey is there any way to give constraints to window frame on web, like have a project with responsive layout but whenever I try to reduce its height it gives me renderflex issues.

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

    Great video ! what about duplicate code ? Can't we use the same video component for desktop and mobile in the same file, and just put specific parameters in separate files (like width and color) ?

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

    Thank you for sharing

  • @Nicosfrs
    @Nicosfrs Před 2 lety

    Amazing!

  • @john7Doe9
    @john7Doe9 Před rokem

    Thanks a lot!

  • @AniMatrixXD
    @AniMatrixXD Před rokem +1

    Why didn´t I know you earlier

  • @001Debjeet
    @001Debjeet Před 2 lety +1

    this is quality flutter video with easy explanation ...
    can make videos like this for any state management

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

      Yep I'm going to look more deeply into state management and make a video soon

    • @001Debjeet
      @001Debjeet Před 2 lety

      @@createdbykoko thanks mate

  • @makisetakashi
    @makisetakashi Před 10 měsíci

    so we need write code twice right ? for desktop view and mobile view ? can we do in one code base ?

  • @juliensavary
    @juliensavary Před 2 lety

    wow revolutionary ty!

  • @pawnalakecottages
    @pawnalakecottages Před rokem

    can we make common code for other pages or we need to every time write
    for both mobile and desktop, is there any tutorial for this ? flutter
    is new for me

  • @MustafaKilic01
    @MustafaKilic01 Před rokem

    Nice, thanks

  • @adil_elkhallouki
    @adil_elkhallouki Před 2 lety

    Awesome 👍

  • @user-ye8my1ip7x
    @user-ye8my1ip7x Před 10 měsíci

    Is it worth learning state-management, why you are not using it and if it is not nessesary, are you still satisfied with your package?

  • @letmeflutter6644
    @letmeflutter6644 Před 9 měsíci

    thank you

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

    Such a great explanation! 1 question, if there are multiple screens in one app , that means we need to do the mobile_body & desktop_body file for each one of the screens , right?

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

      did u find an answer to that?

    • @OMGdon
      @OMGdon Před rokem

      I guess that it's true for all layouts in app.
      But content can be reached by common classes from all layouts.

  • @jeslinjacob6472
    @jeslinjacob6472 Před měsícem

    U should also share about how business logics can be shared between all. These views

  • @errlyrics1946
    @errlyrics1946 Před rokem

    Mr. Dr. Prof. Patrick appreciate it man

  • @hardiklakhalani6268
    @hardiklakhalani6268 Před rokem +1

    What about code duplication? How to eliminate that? This will replace existing widgets with new one so how to deal with keeping the state?

  • @KARTHIKr8642
    @KARTHIKr8642 Před rokem

    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.

  • @MrIMacro
    @MrIMacro Před 9 měsíci

    Not adding the expanded widget at 07:15 is the cause of the famous error (black and yellow lines on the edge of the screen) right?

  • @develo9er727
    @develo9er727 Před měsícem

    So what if i want to add a part or option to a big project? Should I do it 3 times for 3 platforms?

  • @obong_samjoe
    @obong_samjoe Před rokem

    Thanks

  • @byzramku
    @byzramku Před rokem

    this is what I need to implement now

    • @createdbykoko
      @createdbykoko  Před rokem

      nice good luck with it 💜 let me know if there are any issues

  • @yousour5112
    @yousour5112 Před 2 lety

    love it , thank you

  • @muhamadhaydar8419
    @muhamadhaydar8419 Před 2 lety

    Thanks, clear and slice to eat

  • @clickbatemotivation3260

    What emulator are you using?? to be able to resize at will

  • @swiftieforever5152
    @swiftieforever5152 Před měsícem

    Hey, I have just started learning coding with Flutter and I'm curious: how is this code deployed so that people can access the website link as well as the app link? Please don't mind if this question seems silly 😅

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

    Very useful thanks

  • @atikurrahmanatik9863
    @atikurrahmanatik9863 Před 2 lety

    Useful

  • @colegioasturiasprimariaalt2940

    and had an aneurysm before forcing to get serum....now I’m tryna make jazz and am using softex and the sampler cuz, I’m less

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

    Nice video! One question tho, at 4:42, what did you press for the column to expand nicely to other columns
    I mean transforming ResponsiveLayout(mobileBody: , desktopbody: )
    To:
    ResponsiveLayout(
    mobileBody: ,
    DesktopBody: ,
    )

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

      Good question haha. If you add a comma after the last item (before the closing bracket) , it will reformat it nicely. Let me know if that wasn’t clear haha

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

      @@createdbykoko thanks alot lol, that's a pretty nice feature

  • @shuku_yega
    @shuku_yega Před rokem

    can you please a video on dynamic widgets

  • @sebastianmartinezsantos5289
    @sebastianmartinezsantos5289 Před 5 měsíci +1

    I wish flutter could implement a simpler approach like bootstrap.

  • @ikennaumeh655
    @ikennaumeh655 Před 2 lety

    what exactly was the aspect ratio used for

  • @CaioCesarDev
    @CaioCesarDev Před 2 lety

    Awesome

  • @lemidiriba3878
    @lemidiriba3878 Před rokem

    grate video tanks for the content

    • @createdbykoko
      @createdbykoko  Před rokem

      Thanks haha i actually just made a new version of this video! Check it out czcams.com/video/9bo1V9STW2c/video.html

  • @nadislat
    @nadislat Před rokem

    Very useful. Thanks a lot! But when the browser is maximized, I got "BOTTOM OVERFLOWED BY 41 PIXELS". Any ideas? (I used the same code).

  • @user-xs7eo4tk5x
    @user-xs7eo4tk5x Před 5 měsíci

    how about Text FontSize? do we need to change the font size?

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

    Why did you write 2 widgets? If will change any thing, you should write twice. Is this best practice? or what is the best practice?

  • @mehmetcakmaktas9758
    @mehmetcakmaktas9758 Před rokem

    how can I make it scrollable? (SingleChildScrollView doesn't work)

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

    how to Singlescrollview Row and listview?
    error "RenderBox was not laid out: RenderRepaintBoundary#085e6 relayoutBoundary=up5 NEEDS-PAINT"
    because comment section need scrolldown

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

    Hi, It's there any future scope to develop web app using fluttter

  • @atikurrahmanatik9863
    @atikurrahmanatik9863 Před 2 lety

    Nice

  • @Mkrabs
    @Mkrabs Před rokem +1

    How would you save the state of, let's say a card with the number of times it has been clicked, between the two layouts ?

    • @createdbykoko
      @createdbykoko  Před rokem

      That’s up to your choice of state management! Provider, bloc etc

  • @doulainc.498
    @doulainc.498 Před 2 lety +1

    Thank you for this. I have a question please. Does this responsiveness works with the whole app UI. Meaning there wouldn't be render overflow error. Idk if you get Me. For example will the font size.. container height of widgets be responsive as well?

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

      No, you'd still need to handle all those issues as usual.
      The only thing LayoutBuilder does is give you an easy way to know what viewport constraints your app is working with, and by extension, what *layout* it should be using.

    • @doulainc.498
      @doulainc.498 Před 2 lety

      @@abdoufma alright thanks. Please for a fact I'm a beginner can you please guide me on how to achieve such ? The best practices for that?

    • @doulainc.498
      @doulainc.498 Před 2 lety

      @@abdoufma please can u tell me the usual way of handling such?

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

    hi bro,,how to tutorial music streming player with flutter full step by step,thanks :)

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

    what is the main.dart look like? video is way too fast

  • @gggg-no6rm
    @gggg-no6rm Před rokem

    how to change font size

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

    My question we are writing the code twice right separately for mobile and desktop? Is it good practice 🤔

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

      I don't think this is a good choice. Practically, any web app will have a LOT more code than this and repeating all that code doesn't look like a good idea.

    • @mohammadw2000
      @mohammadw2000 Před rokem

      No, it is not!

  • @certificaminascertificamin1013

    I'd recomnd going through a soft theory video on YT and making notes, there's a good 2h30 one wNice tutorialch softs looong but it will

    • @createdbykoko
      @createdbykoko  Před rokem

      Heyy what do you mean soft theory? Can you elaborate

  • @muhammadafzal237
    @muhammadafzal237 Před rokem

    Good

  • @ashikurrahaman7967
    @ashikurrahaman7967 Před rokem

    . thanks

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

    im just here for the Splice beat samples lmao

  • @tonkroew
    @tonkroew Před rokem

    problems and than volu automate the boi cuz I didn’t know how to sidechain. My one buddy produces riddim and he legit saw my daw

  • @CodeEnthusiast78912
    @CodeEnthusiast78912 Před 9 měsíci

    This approach is fine unless your app will have more than 5 tabs, then it becomes really hard to maintain.

  • @TomTurnerIT
    @TomTurnerIT Před rokem +1

    This is very well spoken and easy to listen to, but my dude, for beginners, you really rocket through some of that code and I think you used code snippets that not everyone watching might have and don't reference that you did that.
    Still a great resource though!

    • @createdbykoko
      @createdbykoko  Před rokem

      Try this one czcams.com/video/9bo1V9STW2c/video.html