🖥📱RESPONSIVE DESIGN • Flutter Tutorial

Поділитися
Вставка
  • Опубліковано 2 лют 2025

КОМЕНТАРІ • 186

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

    🥷🏽 FOLLOW ME
    Patreon: www.patreon.com/mitchkoko/
    Instagram: instagram.com/createdbykoko/
    Twitter: twitter.com/createdbykoko/
    TikTok: www.tiktok.com/@createdbykoko/

  • @FlutterMapp
    @FlutterMapp 3 роки тому +195

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

    • @createdbykoko
      @createdbykoko  3 роки тому +9

      My pleasure ✌🏾❤️

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

      @@createdbykoko Ah Such a great thumbnanil

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

  • @martinpalmer2036
    @martinpalmer2036 Рік тому +6

    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  Рік тому +1

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

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

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

  • @HermanPalmgren
    @HermanPalmgren 3 роки тому +27

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

  • @vothanhbinh2k
    @vothanhbinh2k 3 роки тому +10

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

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

    You are the best flutter app teacher ever on UA-cam...thankyou bro

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

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

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

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

  • @JohanLibert-k9g
    @JohanLibert-k9g Рік тому +1

    man your explanation is just legendary

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

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

  • @yupickmyusername
    @yupickmyusername 3 роки тому +3

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

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

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

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

    Thank you for giving such a quick but informative tutorial!

  • @RiccardoGabellone
    @RiccardoGabellone 3 роки тому

    Right quality content at right moment 💪🏻 keep going

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

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

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

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

  • @001Debjeet
    @001Debjeet 3 роки тому +1

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

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

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

    • @001Debjeet
      @001Debjeet 3 роки тому

      @@createdbykoko thanks mate

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

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

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

    This was a clear, well explained video thanks.

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

    Mr. Dr. Prof. Patrick appreciate it man

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

    Why didn´t I know you earlier

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

    So simple and handy tutorial. Thanks man 🖤

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

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

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

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

  • @MrAhbill1
    @MrAhbill1 3 роки тому

    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  3 роки тому

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

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

    Awesome and aesthetic explanation. Thank you!

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

    This is awesome! You make everything so simple

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

    Such a simple and great content buddy ; )

  • @rahuljamba5846
    @rahuljamba5846 3 роки тому

    Excellent Mitch !!!! 💥

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

    This was an extremely helpful video!! Thank you

  • @Neerajkumar-xl9kx
    @Neerajkumar-xl9kx 2 роки тому

    I have subscribed you for this, loved it

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

    This is awesome. Thank you.

  • @iam_1_0
    @iam_1_0 3 місяці тому +1

    You so amazing 😍 please upload more

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

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

  • @cnorse
    @cnorse 3 роки тому

    Please do make more of this!

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

    Short and Easy thanks 👏

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

    love your tutorials❤❤❤❤

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

    Thanks, simple and clear ❤️

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

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

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

    this is what I need to implement now

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

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

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

    This is beautiful

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

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

  • @MissMyMusicAddiction
    @MissMyMusicAddiction 4 місяці тому +1

    is there a way to query the device type, not just the width/height? some frameworks in other dev tools will return iphone, ipad, androidphone, androidtablet, windows, mac, web, etc.

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

    Bro you are awesome!

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

    Thank you, it works perfect!

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

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

  • @reispedroso
    @reispedroso Рік тому +7

    I have to watch this in 0.5x slow down man

    • @abdullahbensaleim2253
      @abdullahbensaleim2253 5 місяців тому

      Yabbb but is very clean

    • @notKhalid
      @notKhalid 4 місяці тому +1

      i had to watch this in 2x

    • @zaksenards
      @zaksenards 2 місяці тому +1

      This is very clean, bro. I am not a fluent English speaker/listener and I was able to understand everything perfectly at standard speed.

  • @ayoubelbadaoui7000
    @ayoubelbadaoui7000 3 роки тому

    clean work

  • @saimaheshparuchuri9826
    @saimaheshparuchuri9826 3 роки тому +4

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

    • @whoadityanawandar
      @whoadityanawandar 2 роки тому +4

      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 Рік тому

      No, it is not!

    • @brenoverissimo3846
      @brenoverissimo3846 2 місяці тому

      Yeah, I'm thinking about how to do it now and it truly sounds a terrible idea.

  • @snooki9
    @snooki9 3 місяці тому

    Nice one :) if you have 3 container on the right part of the screen, each wrap in a padding, to make them feel automatically and evenly the available height ?

  • @juliensavary
    @juliensavary 3 роки тому

    wow revolutionary ty!

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

    Very useful thanks

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

    Amazing!

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

      did u find an answer to that?

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

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

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

    Thanks for sharing

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

    Thanks a lot!

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

    I wish flutter could implement a simpler approach like bootstrap.

  • @SuluXuluS
    @SuluXuluS 7 місяців тому

    Hmm it could be cool when using it with a check, like if width>height (desktop layout) else (phone layout)

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

    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.

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

      Try this one ua-cam.com/video/9bo1V9STW2c/v-deo.html

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

    Nice, thanks

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

    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?

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

    love it , thank you

  • @adil_elkhallouki
    @adil_elkhallouki 3 роки тому

    Awesome 👍

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

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

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

    Thank you for sharing

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

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

  • @g0keyn
    @g0keyn 11 місяців тому +1

    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?

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

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

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

    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?

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

    grate video tanks for the content

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

      Thanks haha i actually just made a new version of this video! Check it out ua-cam.com/video/9bo1V9STW2c/v-deo.html

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

    thank you

  • @Sebastian-cz3vk
    @Sebastian-cz3vk 3 роки тому +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 ?

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

    Muito bom, obrigado por compartilhar conhecimento.👍

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

    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 😅

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

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

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

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

    Thanks

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

    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.

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

    can you please a video on dynamic widgets

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

    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

  • @TGR-wf6gd
    @TGR-wf6gd 3 роки тому +3

    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?

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

    Cocacolastic ❤️

    • @createdbykoko
      @createdbykoko  5 місяців тому

      @@abdullahbensaleim2253 ❤️❤️❤️

  • @giulicon
    @giulicon 3 роки тому +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  3 роки тому +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 3 роки тому +1

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

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

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

  • @somethingcreative9137
    @somethingcreative9137 2 місяці тому

    if we follow second approach then we have to write extra code for each file, is there any other alternative approach or this method is recommended? can you guide me please

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

    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!

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

    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

  • @zino_for_pics7109
    @zino_for_pics7109 3 місяці тому

    thanks Mitch for that , but i wanna know how can get this code flutter and put on my project pls

    • @createdbykoko
      @createdbykoko  3 місяці тому

      @@zino_for_pics7109 it’s pretty minimal so why don’t u just watch the video and code it yourself

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

    Thanks, clear and slice to eat

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

    Isn't it better to do it based on aspect ratio?

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

      Aspect ratio is great for responsive designs yes. There are many ways to achieve it :D

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

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

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

  • @redwanahmedfahim7028
    @redwanahmedfahim7028 5 місяців тому

    Great tutorial as always. But couldn't find the link to this code. Anyone got it?

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

    thank you

  • @atikurrahmanatik9863
    @atikurrahmanatik9863 3 роки тому

    Useful

  • @CaioCesarDev
    @CaioCesarDev 3 роки тому

    Awesome

  • @AmirBaruchPreciseAsteroid
    @AmirBaruchPreciseAsteroid 3 роки тому +1

    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 Рік тому

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

  • @adeirwan-l5s
    @adeirwan-l5s Рік тому

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

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

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

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

    So we need creat two separate file of one page?

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

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