flutter orientation change layout landscape optimize

Question

I designed my Layout in Portrait Mode and everything looked fine. So after i finished my overlay i rotated my device to landscape mode and saw that there is a bottom overflow. There was too many widgets in height so the device cant display them. I searched in the web for a common way to optimize my layout for landscape mode and found nothing that works with flutter. So is there a common way to solve this problem with flutter?

Answer 1

Your question could be a bit more specific - some details about the app or a screenshot would be helpful.

However, I can think of three different options for solving this.

1. Using different widgets for horizontal & vertical screen.

   pro: you can make sure your screen looks exactly how you want it.

   con: you have to write things twice. If your logic is encapsulated though this might just mean laying out the same widgets in 2 different ways.

   You can either write a query yourself or just use the OrientationBuilder class built into flutter.

2. Use a Wrap class instead of a row/column with the appropriate alignment. This will allow your widgets to align themselves as needed to fill the available space. See screenshot below that shows an example of this:

   

   The above screenshot was created using the sample code from the wrap documentation.

3. Use the same view but put it in a listview or a scrollable so that if it overflows you can scroll. You're probably best off reading the documentation thoroughly in this case though so that you understand how scrolling works in flutter and the associated limitations.