Flutter Responsive Design Guide

Learning responsiveness will be a crucial part now that flutter is a portable framework. Because of that, we are going to learn some tips and tricks on how to approach it! 👏
Course to build a production-ready app 👉 robertbrunhage.com/course
Full writeup: robertbrunhage.com
👉 Have additional questions, join Discord: / discord
Want to support me?
♥ Patreon: / robertbrunhage
♥ BuyMeACoffee: buymeacoffee.com/robertbrunhage
♥ Paypal: paypal.me/robertbrunhage
····················································································
You can find me on:
● Website: robertbrunhage.com
● Twitter: / robertbrunhage
● Discord: / discord
····················································································
😎 Subscribe: bit.ly/2SUyRhx
00:00 Overview
00:31 LayoutBuilder
01:52 MediaQuery
03:03 Constants / Breakpoints
04:00 Responsive Widget
08:18 MaxWidth Widget

[@tadaspetra]

In your if else statement in ResponsiveLayout saying “dimens.maxWidth >= to kTabletBreakpoint” is dead(unnecessary) code. it will only get to the else if statement if it got past the first if. So it will always be true at that point in code. Just a small suggestion. Great video though 😊

[@RobertBrunhage]

Oh that is correct, will pin that! Thanks for the feedback 😁

[@RobertBrunhage]

The code is updated and you can find it over at robertbrunhage.com, either through the blogpost or through the link on there to GitHub! Hope this was helpful and thank you all for the support 😊

[@tarunkumargola7633]

Sir, I am working on a flutter-based project. My app contains some bugs which I am unable to remove. Please help me. I am in big problem

[@pacholskigaming8699]

Please keep going. Your content is really great. I've been following you for quite some time now

[@poujhit]

Quality of this video is great. Keep it up.

[@panthonyy]

Awesome intro to responsive app-building in flutter. That is precisely what I was looking for since I moved from react-web based app development:)

[@navneetsinghprofile]

Thanks for always providing something new.

[@i.k.shaikh3772]

Excellent demonstration 👍🏼

[@vijayprajapati7484]

thank you so much keep Uploading such kind of Videos

[@gilbertohenrique3252]

Kinda off topic, but could you make a gist with your VSCode settings? I'm migrating from AS and I just love your settings. Great video btw

[@TechieChuks]

This is the best I have gotten so far.... I already started using it...

[@fadlydestrianarusmana1076]

Great video. Thanks dude

[@AioriaPoderoso]

I just needed this thx.

[@RobertBrunhage]

Glad I is of help!

[@jhunr8701]

wow, an easy way to understand flutter responsive app

[@aminelahrim8142]

We much need to talk about how you can order requests with dio until the first one finished and all that requests come from user interaction one by one and (hint you can use completer) no one was mentioned this one any article or post and i face it, when i need to unfavore item from an infinite scroll list and need that unfavore item to have the correct replacement not the second unfavore replacement item to stick with correct pagination

[@michaelamir6504]

Bro, you're so underrated...

[@RobertBrunhage]

Thanks, really appreciated! 🙌

[@limatembe3804]

True, very true

[@SeriousSerge]

Thanks for your great content. I've learned a lot thanks to you!. One question: what plugin you use to turn >= to ≥?

[@marflage]

It's a font family called Fira Code, specifically designed for coding.

[@truthmatters7573]

What Marflage said is true. There are other fonts as well that have font ligatures that make common operators look pretty. you have to set the editor font to a font that supports ligatures, and then you have to tick the box that says enable font ligatures in your settings.

[@motasemabunema5545]

Great Content! Who are you from?

[@dev.floody]

What font and themes that you use? I really love it

[@omjogani]

Which Theme do you use for VSCode? I need same theme as your, What to do?

[@ericchua3492]

My main challenge is how to handle responsive layout on mobile devices only. Let's look at Android, it has so many different resolutions. I have a custom appbar, and it's tough to have a looks good height. If I use 0.4 * MediaQuery.of(context).size.height, it won't be accurate when I have widgets inside the AppBar. Somehow someway, I will get renderflow issue or too long height. On smaller devices, it looks big. Is there any ways to tackle this? I have tried SizeConfigs and few others ways, seems to have the same problem. if I do conditional checks like MediaQuery's width or Layout constraints width, it's hard to predict it. Plus even I can make it looks good, but I will have troubles to make it works on iOS. If I need to cater all of these, my codes will look so spaghetti. Do you have any recommendations?

[@void4904]

What is the your font? I hope to use. It's cool :)

[@NoBodyknow172]

Can you please make more deep drive into like transaction form mobile to tablet and to website view like bottom navigation bar, drawer and etc.

[@PatrikVesterberg]

Ok, here's a offtopic question. Because I'm getting crazy over here. I've tried to find some kind of cursor-plugin for VSCode that uses block-cursor when going around in a file and transforms to line-cursor when typing. I see that your cursor behaves this way...what plug are you using? Keep up the good work with your videos! Ha en bra dag och tacksam för svar :)

[@RobertBrunhage]

I am using the vim plugin which has this by default 😊

[@PatrikVesterberg]

@@RobertBrunhage Ah, off course! :) Thank your for your answer!

[@bodehallak1552]

Thank you very much, but there's one thing I didn't understand. Why in the main file you have defined MyCustmonMobileContent() MyCustomTabletContent().

[@niyazitoros9190]

What about sizer plugin? Is it not full responsive? Or do you like to to make similar plugin?

[@codingbuddy1750]

so i have to code for mobile, tab and desktop separately ?

[@NoBodyknow172]

What about flutter_screenutil with responsive_framework

[@jacopoguzzo4097]

What is your color theme & font for VS Code??😍

[@abderrazakkenniche2801]

Hi, thanks for the video, it's very helpful I would just ask you how to make VS Code convert this

[@navasjaseer2498]

Hello ,sir can you make a video of how make UI responsive for multiple screen types in mobile devices ,It is most difficult for me ,please help me 🙏

[@BhagyeshMotkar]

There are some simple tips you can follow 1. use the smallest screen to make your UI. 2. use ListView instead of the column if the content is more than the screen. 3. if you are using a Sized box for spacing in between then always use the values based on screen width & height Happy coding :)

[@anaselboudali2824]

+1 follower

[@muhammadadeel9567]

Can we learn flutter while we have adobe xd to converting flutter?

[@danielleon8326]

I´m using flutter 2.5 and i have a problem with the responsive widget, when i write the constructor it always ask me about making all parameters required, i think its due thanks to the null safety feature, how can I make it work, please I´m stuck. I tried to look the code updated but I couldn't find it

[@RobertBrunhage]

@required should be replaced with simply "required" final Widget tabletBody -> final Widget? tabletBody final Widget desktopBody -> final Widget? desktopBody Might be some more changes, I recommend going through the null safety documentation dart.dev/null-safety/understanding-null-safety

[@Programming_Show]

Is it really that simple to Responsive the app?

[@ayoubelmhamdi7920]

we can't thinking where you are very fast, we are not a computer, the art is how to give us possible information in a limited time.

[@eikobleicher5520]

Please note that this code has severe issues. For example, you are building several complete layouts with widget trees all the time, although naturally only only of the is shown at a time. Do not do this - this is what builders are for. You could change the implementation to accept builders instead of widgets to solve this correctly.