I'm doing an app that can be used on Apple, Android, web and desktop so for many different screen sizes - phone, tablet, laptop, desktop etc. Is it reasonable to design for say three different layouts - small, medium, and large - where the layout for each could be slightly different - or is it more common to have just a single basic layout that populates widgets row by row and automatically starts on the next row when a row gets full.
[Edit] What I mean is that for a large screen I could have one set of widgets and for a small screen I could have a completely different set of widgets - is that reasonable to do or is it too much work. eg if the user starts with a large window and then resizes the window to make it small, the appearance and maybe the functionality might change a little bit - is that bad? This link posted by Kaushik is helpful Flutter: How to do responsiveness for "real" mobile/web applications?
Using MediaQuery class:
mediaSize = MediaQuery.of(context);
Then you can get media height and width
mediaSize.size.width
mediaSize.size.height
If you want to separate different dimensions, equal the above values to another value and divide like math operation.
width=MediaQuery.of(context).size.width;
height=MediaQuery.of(context).size.height;
while using width and height use the above code insted of using numericals
ex:`Container(
margin:EdgeInsets.only(left:8,right:8),
width:MediaQuery.of(context).size.width -20,
height:MediaQuery.of(context).size.height
)`
Here the container have margin of 8 in both left and right and the height will be screen height
Using MediaQuery you can handle the size problem in the app
var size = MediaQuery.of(context).size;
var width = size.width;
var height = size.height;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.