Flutter Responsive Design Guide

Рет қаралды 54,719

3 жыл бұрын

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.gg/CPwSezC
Want to support me?
♥ Patreon: www.patreon.com/join/RobertBrunhage
♥ BuyMeACoffee: buymeacoffee.com/robertbrunhage
♥ Paypal: paypal.me/robertbrunhage
····················································································
You can find me on:
● Website: robertbrunhage.com
● Twitter: RobertBrunhage
● Discord: discord.gg/CPwSezC
····················································································
😎 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

Пікірлер: 47

@tadaspetra 3 жыл бұрын

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 3 жыл бұрын

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

@RobertBrunhage 3 жыл бұрын

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 3 жыл бұрын

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 3 жыл бұрын

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

@poujhit 3 жыл бұрын

Quality of this video is great. Keep it up.

@navneetsinghprofile 3 жыл бұрын

Thanks for always providing something new.

@i.k.shaikh3772 3 жыл бұрын

Excellent demonstration 👍🏼

@panthonyy 2 жыл бұрын

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

@vijayprajapati7484 3 жыл бұрын

thank you so much keep Uploading such kind of Videos

@fadlydestrianarusmana1076 2 жыл бұрын

Great video. Thanks dude

@TechieChuks 2 жыл бұрын

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

@gilbertohenrique3252 3 жыл бұрын

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

@AioriaPoderoso 3 жыл бұрын

I just needed this thx.

@RobertBrunhage 3 жыл бұрын

Glad I is of help!

@jhunr8701 3 жыл бұрын

wow, an easy way to understand flutter responsive app

@michaelamir6504 3 жыл бұрын

Bro, you're so underrated...

@RobertBrunhage 3 жыл бұрын

Thanks, really appreciated! 🙌

@limatembe3804 3 жыл бұрын

True, very true

@motasemabunema5545 3 жыл бұрын

Great Content! Who are you from?

@dev.floody 2 жыл бұрын

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

@omjogani 3 жыл бұрын

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

@NoBodyknow172 Жыл бұрын

What about flutter_screenutil with responsive_framework

@aminelahrim8142 3 жыл бұрын

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

@codingbuddy1750 3 жыл бұрын

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

@jacopoguzzo4097 3 жыл бұрын

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

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

@bodehallak1552 3 жыл бұрын

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

@niyazitoros9190 3 жыл бұрын

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

@void4904 3 жыл бұрын

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

@ericchua3492 3 жыл бұрын

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?

@SeriousSerge 3 жыл бұрын

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

@marflage 3 жыл бұрын

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

@truthmatters7573 2 жыл бұрын

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.

@abderrazakkenniche2801 2 жыл бұрын

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

@muhammadadeel9567 3 жыл бұрын

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

@PatrikVesterberg 3 жыл бұрын

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 3 жыл бұрын

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

@PatrikVesterberg 3 жыл бұрын

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

@anaselboudali2824 3 жыл бұрын

+1 follower

@danielleon8326 2 жыл бұрын

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 2 жыл бұрын

@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

@ayoubelmhamdi7920 6 ай бұрын

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.

@navasjaseer2498 3 жыл бұрын

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 3 жыл бұрын

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

@Programming_Show 2 жыл бұрын

Is it really that simple to Responsive the app?

@eikobleicher5520 2 жыл бұрын

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.