Responsive Layouts for Responsive Apps

I would like to point out a important difference between MediaQuery and LayoutBuilder. If you use then as parent of your page, sure, they will work the same. However, while MediaQuery returns the dimensions of the screen, LayoutBuilder returns the dimensions of the available space (determined by the constraints passed from the parent to its child)

[@tadaspetra]

Yes! I actually meant to mention that in the video, but I guess I missed it. I will pin your comment. Great catch!

[@mnc12004]

I have an in production with many screens. To get it working on Web and desktop to, I need to sort out the layouts for bigger screens. Not really sure how to achieve it, but yep loads research and trial and error. Thanks loads for this video. Points me in the right direction...

[@christianmarpert3844]

Thks mate! nice explanation! For my purposes I createt a deviceSettings class containing all relevant properties. In a next step I use a function returning a deviceSetting object, depending on the device I pass in(mobile, tablet, laptop). To get the device itself I use the GetX package. Maybe there are simpler ways, but works pretty well for me. And I can incorporate some of your tips ;). Cheers

[@JigneshWorld]

Thanks much, nice video and fundamental building blocks to have responsiveness on your flutter app. AFAIK: MediaQuery and LayoutBuilder will have a different use-case MediaQuery - It will provide size of the current media (e.g., the window containing your app). This is useful to know size of the app window when app used in mobile full screen, part of screen with picture in picture mode, foldable device or desktop app window or browser window size. LayoutBuilder - It will provide constraints of parent to it's child to render widget accordingly. This is useful when the parent constrains the child's size and doesn't depend on the child's intrinsic size. e.g. auto size text

[@tadaspetra]

Yes you are correct!

[@mithson]

Nice video bro, great work keep doing it

[@chipekowasa6571]

Awesome 👏👏👏

[@ebenezervampu7882]

Thank you so much

[@olajireabdullahi1196]

Thanks for the video. Which emulator are you using to the extends that you can resize and expand it. Is it device preview package??

[@dwiky2329]

it's a macOs device. Not an emulator

[@festusikperha6528]

So awesome

[@michaelkalango5779]

Nice! Thanks for the video..

[@tadaspetra]

Thanks for watching!

[@silas_wolf]

THANK YOU!!!

[@tadaspetra]

Happy to help!

[@marufhassan634]

Its all fine and good but we need a simpler way for responsiveness of the app's height, width and fontSize. All these values are provided by the designer in Figma and I can't keep using hit and try method to find the percentage or ratio it works out with. We need a simple widget that takes in exact value and resizes the fontSize and text according to the screen change.

[@tadaspetra]

You could use this. pub.dev/packages/auto_size_text

[@sder-v2v]

Are you running on M1?

[@tadaspetra]

No still on the Intel processor

[@arustresso]

Wat do u prefer?

[@tadaspetra]

I think they are all for different situations. So it really depends on what you need to do

[@SandeepKumar-gg9jg]

Noice

[@Algardraug]

"A square with an aspect ratio of 2:1".... that's a rectangle