How to make flutter application height and width adapt to different screen sizes? - flutter

Question

I and my team are working on a different screen size emulator. While integrating we notice that some properties are overlapped by others, and some are not visible only. So how we can make our app adaptive to different screen sizes. Went through the mediaquery() widget but I didn't understood much.

Answer 1

Using MediaQuery class:
MediaQueryData queryData;
queryData = MediaQuery.of(context);
MediaQuery: Establishes a subtree in which media queries resolve
to the given data.
MediaQueryData: Information about a piece of media (e.g., a
window).
To get Device Pixel Ratio:
queryData.devicePixelRatio
To get width and height of the device screen:
queryData.size.width
queryData.size.height
To get text scale factor:
queryData.textScaleFactor
Using AspectRatio class:
From doc:
A widget that attempts to size the child to a specific aspect ratio.
The widget first tries the largest width permitted by the layout
constraints. The height of the widget is determined by applying the
given aspect ratio to the width, expressed as a ratio of width to
height.
For example, a 16:9 width:height aspect ratio would have a value of
16.0/9.0. If the maximum width is infinite, the initial width is determined by applying the aspect ratio to the maximum height.
Now consider a second example, this time with an aspect ratio of 2.0
and layout constraints that require the width to be between 0.0 and
100.0 and the height to be between 0.0 and 100.0. We'll select a width of 100.0 (the biggest allowed) and a height of 50.0 (to match the
aspect ratio).
//example
new Center(
child: new AspectRatio(
aspectRatio: 100 / 100,
child: new Container(
decoration: new BoxDecoration(
shape: BoxShape.rectangle,
color: Colors.orange,
)
),
),
),
Also you can use:
LayoutBuilder
FittedBox
CustomMultiChildLayout

Answer 2

MediaQuery is a good option for this scenario
for example, I just want to create a container with half of the available width and height of my mobile screen
class MyContainer extends StatelessWidget {
#override
Widget build(BuildContext context) {
final size = MediaQuery.of(context).size;
return Container(
color:Colors.orange,
width: size.width/2,
height: size.height/2
);
}
}