Flutter responsive landscape view

i just started to develop a small Flutter application and came a long the following problem:

Sketch

How can i make sure the view is fitting in every device and is not overflowing?

Do i have to work with

MediaQuery.of(context).size.height

everywhere and calculate everything..?

And another problem for me are the buttons shown in the sketch. They have diffrent texts and thus they aren't the same width. I tried to put both of them into a container and give the container a width and let the buttons expand. But here again, i am struggling with the diffrent sizes of the devices. If i give a width of 300 to both of the buttons, wouldn't that be to much for a smaller device and they would overflow?

Sadly i need to emulate on my phone and can't try diffrent resolutions.

I appreciate any kind of help.

1 answer

  • answered 2019-03-14 10:24 Kenneth Li

    1. Create a dart file 'ScreenVariables.dart'

    2. Inside this dart file, create a class sv

    3. Inside this class, create a static var:

    static double dblScreenWidth = window.physicalSize.width / window.devicepixelratio;

    1. Create other static vars in class sv such as dblScreenHeight, dblDefaultFontSize = dblScreenWidth / 20, dblDefaultButtonWidth = dblScreenWidth / 5

    2. Import this dart file in all other dart files.

    3. Then you can set the Width of your buttons to sv.dblDefaultButtonWidth in other dart files.