Flutter Responsive Design Guide
Вставка
- Опубліковано 22 лип 2024
- 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
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 😊
Oh that is correct, will pin that!
Thanks for the feedback 😁
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 😊
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
Please keep going. Your content is really great. I've been following you for quite some time now
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:)
Thanks for always providing something new.
Quality of this video is great. Keep it up.
Excellent demonstration 👍🏼
thank you so much keep Uploading such kind of Videos
This is the best I have gotten so far.... I already started using it...
Great video. Thanks dude
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
I just needed this thx.
Glad I is of help!
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
Bro, you're so underrated...
Thanks, really appreciated! 🙌
True, very true
Thank you very much, but there's one thing I didn't understand.
Why in the main file you have defined
MyCustmonMobileContent()
MyCustomTabletContent().
wow, an easy way to understand flutter responsive app
Which Theme do you use for VSCode? I need same theme as your, What to do?
so i have to code for mobile, tab and desktop separately ?
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?
What font and themes that you use? I really love it
What about sizer plugin? Is it not full responsive? Or do you like to to make similar plugin?
What about flutter_screenutil with responsive_framework
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.
What is the your font? I hope to use. It's cool :)
What is your color theme & font for VS Code??😍
Can we learn flutter while we have adobe xd to converting flutter?
Great Content!
Who are you from?
Hi, thanks for the video, it's very helpful
I would just ask you how to make VS Code convert this
Thanks for your great content. I've learned a lot thanks to you!. One question: what plugin you use to turn >= to ≥?
It's a font family called Fira Code, specifically designed for coding.
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.
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
@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
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 :)
I am using the vim plugin which has this by default 😊
@@RobertBrunhage Ah, off course! :) Thank your for your answer!
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 🙏
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 :)
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.
Is it really that simple to Responsive the app?
+1 follower
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.