🖥📱RESPONSIVE DESIGN • Flutter Tutorial

  Рет қаралды 303,454

Mitch Koko

Mitch Koko

Күн бұрын

Пікірлер: 186
@createdbykoko
@createdbykoko Жыл бұрын
🔥📱 Flutter Templates • mitchkoko.app/ 🥷🏽📱 Minimal Social App • mitchkoko.gumroad.com/l/MinimalSocialApp 💰📱 Minimal Ecommerce App • mitchkoko.gumroad.com/l/MinimalEcommerceApp
@FlutterMapp
@FlutterMapp 3 жыл бұрын
Mitch, your thumbnail is great! Thanks for sharing with the Flutter community 👏
@createdbykoko
@createdbykoko 3 жыл бұрын
My pleasure ✌🏾❤️
@asterjoules
@asterjoules 2 жыл бұрын
@@createdbykoko Ah Such a great thumbnanil
@tahseenahmadansari-g1o
@tahseenahmadansari-g1o Жыл бұрын
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 3 жыл бұрын
I have been making some programming videos myself, and I must say that your language, tone and video style is so clear. Great video!
@martinpalmer2036
@martinpalmer2036 Жыл бұрын
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 Жыл бұрын
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 🙂
@vothanhbinh2k
@vothanhbinh2k 3 жыл бұрын
engaging voices, quality videos, and useful content, keep these series going sir
@lifeoffancypigeons8631
@lifeoffancypigeons8631 3 ай бұрын
You are the best flutter app teacher ever on KZbin...thankyou bro
@keflat23
@keflat23 2 жыл бұрын
best channel over the tube for flutter learning very good job mate
@createdbykoko
@createdbykoko 2 жыл бұрын
Thank you! Means a lot to me :D
@EmanueleTozzato
@EmanueleTozzato Жыл бұрын
Professor Koko just became my hero tutorialist. Perfect speed, clear and effective speech, pleasant colors, 10+
@JohanLibert-k9g
@JohanLibert-k9g Жыл бұрын
man your explanation is just legendary
@createdbykoko
@createdbykoko Жыл бұрын
haha Johan you are too nice. Your words mean a lot to me 💜
@yupickmyusername
@yupickmyusername 3 жыл бұрын
You just earn new subscriber bro, keep up with the flutter content, Love your videos!
@createdbykoko
@createdbykoko 3 жыл бұрын
Thanks 🙏 ❤️
@arafathussain851
@arafathussain851 Жыл бұрын
Very clean and clear explanation, thank you for the video!
@nevillelam7999
@nevillelam7999 Жыл бұрын
Thank you for giving such a quick but informative tutorial!
@createdbykoko
@createdbykoko Жыл бұрын
No worries glad it helped! 💜
@MissMyMusicAddiction
@MissMyMusicAddiction 3 ай бұрын
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.
@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!
@rishabhvishwakarma5745
@rishabhvishwakarma5745 Жыл бұрын
you just explained one of the most imp. and kind of difficult topic in min.. , just wow thanks man😎😎
@snooki9
@snooki9 Ай бұрын
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 ?
@RiccardoGabellone
@RiccardoGabellone 3 жыл бұрын
Right quality content at right moment 💪🏻 keep going
@createdbykoko
@createdbykoko 3 жыл бұрын
thank u for the comment :D
@Abomin81onVlog
@Abomin81onVlog 3 жыл бұрын
This was a clear, well explained video thanks.
@createdbykoko
@createdbykoko 3 жыл бұрын
no problem :D
@001Debjeet
@001Debjeet 3 жыл бұрын
this is quality flutter video with easy explanation ... can make videos like this for any state management
@createdbykoko
@createdbykoko 3 жыл бұрын
Yep I'm going to look more deeply into state management and make a video soon
@001Debjeet
@001Debjeet 3 жыл бұрын
@@createdbykoko thanks mate
@omkarp9943
@omkarp9943 Жыл бұрын
I hope you will be having 1M subscribers soon !!
@errlyrics1946
@errlyrics1946 2 жыл бұрын
Mr. Dr. Prof. Patrick appreciate it man
@createdbykoko
@createdbykoko 2 жыл бұрын
whos dr prof patrick?
@positiveknowledge4045
@positiveknowledge4045 Жыл бұрын
aaah you're doing great I saw your website and it was fantastic 💯👌👍
@QuietStorm_
@QuietStorm_ 2 жыл бұрын
Thanks for the video, it's easy to understand 👍🏼
@createdbykoko
@createdbykoko 2 жыл бұрын
No problem ✌🏾
@sewbeta4334
@sewbeta4334 2 жыл бұрын
Great video. You are a good teacher : Simple, clear and exhaustive.
@createdbykoko
@createdbykoko 2 жыл бұрын
Thanks glad it helepd
@sakinahtajuddin7233
@sakinahtajuddin7233 2 жыл бұрын
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 жыл бұрын
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.
@learningbrains910
@learningbrains910 Жыл бұрын
So simple and handy tutorial. Thanks man 🖤
@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?
@julianwebb9222
@julianwebb9222 Жыл бұрын
Awesome and aesthetic explanation. Thank you!
@saimaheshparuchuri9826
@saimaheshparuchuri9826 2 жыл бұрын
My question we are writing the code twice right separately for mobile and desktop? Is it good practice 🤔
@whoadityanawandar
@whoadityanawandar 2 жыл бұрын
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 24 күн бұрын
Yeah, I'm thinking about how to do it now and it truly sounds a terrible idea.
@eboatwright_
@eboatwright_ 2 жыл бұрын
This is awesome! You make everything so simple
@createdbykoko
@createdbykoko 2 жыл бұрын
👨🏽‍💻❤️❤️
@rahuljamba5846
@rahuljamba5846 3 жыл бұрын
Excellent Mitch !!!! 💥
@PiratesZombies
@PiratesZombies 2 жыл бұрын
how to Singlescrollview Row and listview? error "RenderBox was not laid out: RenderRepaintBoundary#085e6 relayoutBoundary=up5 NEEDS-PAINT" because comment section need scrolldown
@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 :)
@hardiklakhalani6268
@hardiklakhalani6268 2 жыл бұрын
What about code duplication? How to eliminate that? This will replace existing widgets with new one so how to deal with keeping the state?
@SuluXuluS
@SuluXuluS 5 ай бұрын
Hmm it could be cool when using it with a check, like if width>height (desktop layout) else (phone layout)
@rahulranjansingh2679
@rahulranjansingh2679 2 жыл бұрын
Short and Easy thanks 👏
@Mkrabs
@Mkrabs Жыл бұрын
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 Жыл бұрын
That’s up to your choice of state management! Provider, bloc etc
@cnorse
@cnorse 2 жыл бұрын
Please do make more of this!
@maneeshapte6883
@maneeshapte6883 2 жыл бұрын
This was an extremely helpful video!! Thank you
@giulicon
@giulicon 3 жыл бұрын
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 жыл бұрын
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 жыл бұрын
@@createdbykoko thanks alot lol, that's a pretty nice feature
@soumen81
@soumen81 Жыл бұрын
This is awesome. Thank you.
@CHHATRAPHULARA
@CHHATRAPHULARA 11 ай бұрын
love your tutorials❤❤❤❤
@moazelsawaf2000
@moazelsawaf2000 2 жыл бұрын
Thanks, simple and clear ❤️
@xixnineteen6322
@xixnineteen6322 2 жыл бұрын
Thank you, it works perfect!
@autumnuniverse1940
@autumnuniverse1940 2 жыл бұрын
This is beautiful
@namanpatel252
@namanpatel252 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.
@AniMatrixXD
@AniMatrixXD Жыл бұрын
Why didn´t I know you earlier
@createdbykoko
@createdbykoko Жыл бұрын
Haha welcome 🤗
@sundaramoorthykuppuswamy2745
@sundaramoorthykuppuswamy2745 Жыл бұрын
Such a simple and great content buddy ; )
@createdbykoko
@createdbykoko Жыл бұрын
Ate glad it helps you man! 💜💜💜
@Sebastian-cz3vk
@Sebastian-cz3vk 3 жыл бұрын
​ @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 ?
@Neerajkumar-xl9kx
@Neerajkumar-xl9kx 2 жыл бұрын
I have subscribed you for this, loved it
@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) ?
@somethingcreative9137
@somethingcreative9137 Ай бұрын
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
@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.
@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
@makisetakashi
@makisetakashi Жыл бұрын
so we need write code twice right ? for desktop view and mobile view ? can we do in one code base ?
@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
@develo9er727
@develo9er727 7 ай бұрын
So what if i want to add a part or option to a big project? Should I do it 3 times for 3 platforms?
@g0keyn
@g0keyn 10 ай бұрын
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?
@amandeepthakur7847
@amandeepthakur7847 3 ай бұрын
Having same doubt, did u find the answer?
@swiftieforever5152
@swiftieforever5152 6 ай бұрын
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 😅
@izmir175
@izmir175 2 жыл бұрын
Bro you are awesome!
@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
@jeslinjacob6472
@jeslinjacob6472 6 ай бұрын
U should also share about how business logics can be shared between all. These views
@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
@eduardo_pedroso
@eduardo_pedroso Жыл бұрын
I have to watch this in 0.5x slow down man
@abdullahbensaleim2253
@abdullahbensaleim2253 3 ай бұрын
Yabbb but is very clean
@notKhalid
@notKhalid 3 ай бұрын
i had to watch this in 2x
@zaksenards
@zaksenards 24 күн бұрын
This is very clean, bro. I am not a fluent English speaker/listener and I was able to understand everything perfectly at standard speed.
@iam_1_0
@iam_1_0 2 ай бұрын
You so amazing 😍 please upload more
@createdbykoko
@createdbykoko 2 ай бұрын
@@iam_1_0 💜💜
@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!
@ayoubelbadaoui7000
@ayoubelbadaoui7000 3 жыл бұрын
clean work
@juliensavary
@juliensavary 3 жыл бұрын
wow revolutionary ty!
@createdbykoko
@createdbykoko 3 жыл бұрын
No prob :)
@pozharHAHAHAHAHA
@pozharHAHAHAHAHA 2 жыл бұрын
так просто и так понятно, спасибо за такое крутое видео )
@mehmetcakmaktas9758
@mehmetcakmaktas9758 2 жыл бұрын
how can I make it scrollable? (SingleChildScrollView doesn't work)
@sudipraaz
@sudipraaz 2 жыл бұрын
great work + greate contribution to make it easily understandable. Keep up the good work
@createdbykoko
@createdbykoko 2 жыл бұрын
thanks!
@sebastianmartinezsantos5289
@sebastianmartinezsantos5289 10 ай бұрын
I wish flutter could implement a simpler approach like bootstrap.
@redwanahmedfahim7028
@redwanahmedfahim7028 3 ай бұрын
Great tutorial as always. But couldn't find the link to this code. Anyone got it?
@TGR-wf6gd
@TGR-wf6gd 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?
@speedtnt7591
@speedtnt7591 2 жыл бұрын
Very useful thanks
@createdbykoko
@createdbykoko 2 жыл бұрын
no problem
@shuku_yega
@shuku_yega 2 жыл бұрын
can you please a video on dynamic widgets
@justinus
@justinus 9 ай бұрын
what is the main.dart look like? video is way too fast
@adeirwan-l5s
@adeirwan-l5s 11 ай бұрын
how about Text FontSize? do we need to change the font size?
@zino_for_pics7109
@zino_for_pics7109 2 ай бұрын
thanks Mitch for that , but i wanna know how can get this code flutter and put on my project pls
@createdbykoko
@createdbykoko 2 ай бұрын
@@zino_for_pics7109 it’s pretty minimal so why don’t u just watch the video and code it yourself
@john7Doe9
@john7Doe9 2 жыл бұрын
Thanks a lot!
@abhaykumarbhumihar6166
@abhaykumarbhumihar6166 Жыл бұрын
So we need creat two separate file of one page?
@luisgonzaloguarnizogarcia7587
@luisgonzaloguarnizogarcia7587 2 жыл бұрын
Thanks for sharing
@AmirBaruchPreciseAsteroid
@AmirBaruchPreciseAsteroid 3 жыл бұрын
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 ^^
@milandol321
@milandol321 Жыл бұрын
Isn't it better to do it based on aspect ratio?
@createdbykoko
@createdbykoko Жыл бұрын
Aspect ratio is great for responsive designs yes. There are many ways to achieve it :D
@codenuts29
@codenuts29 Жыл бұрын
Hi, It's there any future scope to develop web app using fluttter
@doulainc.498
@doulainc.498 2 жыл бұрын
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 жыл бұрын
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?
@ikennaumeh_io
@ikennaumeh_io 3 жыл бұрын
what exactly was the aspect ratio used for
@Nicosfrs
@Nicosfrs 2 жыл бұрын
Amazing!
@ayushmuley1907
@ayushmuley1907 Жыл бұрын
Thank you for sharing
@clickbatemotivation3260
@clickbatemotivation3260 Жыл бұрын
What emulator are you using?? to be able to resize at will
@nadislat
@nadislat Жыл бұрын
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).
@adil_elkhallouki
@adil_elkhallouki 2 жыл бұрын
Awesome 👍
@basssdeso
@basssdeso Жыл бұрын
hi bro,,how to tutorial music streming player with flutter full step by step,thanks :)
@MustafaKilic01
@MustafaKilic01 2 жыл бұрын
Nice, thanks
@MaxwellRios
@MaxwellRios 2 жыл бұрын
Muito bom, obrigado por compartilhar conhecimento.👍
@SEELIPRANEETH
@SEELIPRANEETH Ай бұрын
So 10 custom screens become 20?
@AashikaBhat
@AashikaBhat Жыл бұрын
thank you
@obong_samjoe
@obong_samjoe 2 жыл бұрын
Thanks
@muayyedsiraj
@muayyedsiraj 5 ай бұрын
so your basically coding for two or more screens?
🖥📱Responsive Dashboard UI • FLUTTER Tutorial ♡
29:33
Mitch Koko
Рет қаралды 151 М.
Adaptive vs. Responsive | Decoding Flutter
5:09
Flutter
Рет қаралды 109 М.
REAL or FAKE? #beatbox #tiktok
01:03
BeatboxJCOP
Рет қаралды 18 МЛН
Sigma Kid Mistake #funny #sigma
00:17
CRAZY GREAPA
Рет қаралды 30 МЛН
So Cute 🥰 who is better?
00:15
dednahype
Рет қаралды 19 МЛН
黑天使只对C罗有感觉#short #angel #clown
00:39
Super Beauty team
Рет қаралды 36 МЛН
10x Your Speed With Flutter
8:04
Flutter Mapp
Рет қаралды 76 М.
Flutter Responsive UI
5:11
The Flutter Way
Рет қаралды 12 М.
Flutter Responsive Design Tutorial 📲
11:00
CodeX
Рет қаралды 68 М.
🎓📱 FULL Flutter Masterclass: Beginner to Pro
9:36:17
Mitch Koko
Рет қаралды 310 М.
Top 30 Flutter Tips and Tricks
6:50
Flutter Mapp
Рет қаралды 576 М.
Responsive Design in Flutter: A Complete Course
29:51
HeyFlutter․com
Рет қаралды 3,3 М.
Top 10 Flutter Widgets (for Responsive Layouts)
13:17
HeyFlutter․com
Рет қаралды 74 М.
Responsive Design | Tutorial
10:21
FlutterFlow
Рет қаралды 48 М.
#FlutterInProduction: Roadmap
6:41
Flutter
Рет қаралды 10 М.
REAL or FAKE? #beatbox #tiktok
01:03
BeatboxJCOP
Рет қаралды 18 МЛН