Home > Enterprise >  how to handle different screen sizes with flutter app
how to handle different screen sizes with flutter app

Time:06-29

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.

CodePudding user response:

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.

CodePudding user response:

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

  • Related