Flutter UI Orientation:
Using the UI based Orientation:
In certain cases, it can be handy to update the design of an app when the user rotates their screen from portrait mode to landscape mode. For example, we may want to show one item after the next in portrait mode and side-by-side in landscape mode.
In this Flutter app, we are building two different layouts depending on a given Orientation
. In this example, we’ll build a list that displays 2 columns in portrait mode and 3 columns in landscape mode.
Using Orientation in Flutter App:
- Creating a
GridView
with 2 columns - Use an
OrientationBuilder
to change the number of columns
Creating a GridView
with 2 columns:
First, we need a list of items to work with. Rather than using a normal list, we’ll want a list that displays items in a Grid view. For that, we are creating a grid view with 2 columns.