how to handle different screen sizes with flutter app

Question

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. e.g. 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?

Answer 1

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.

Answer 2

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

Answer 3

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;