Update the UI based on orientation

In some situations, you want to update the display of an app when the user rotates the screen from portrait mode to landscape mode. For example, the app might show one item after the next in portrait mode, yet put those same items side-by-side in landscape mode.

In Flutter, you can build different layouts depending on a given Orientation. In this example, build a list that displays two columns in portrait mode and three columns in landscape mode using the following steps:

1. Build a GridView with two columns.
2. Use an OrientationBuilder to change the number of columns.

1. Build a GridView with two columns

First, create a list of items to work with. Rather than using a normal list, create a list that displays items in a grid. For now, create a grid with two columns.

GridView.count(
  // A list with 2 columns
  crossAxisCount: 2,
  // ...
);

To learn more about working with GridViews, see the Creating a grid list recipe.

2. Use an OrientationBuilder to change the number of columns

To determine the app’s current Orientation, use the OrientationBuilder widget. The OrientationBuilder calculates the current Orientation by comparing the width and height available to the parent widget, and rebuilds when the size of the parent changes.

Using the Orientation, build a list that displays two columns in portrait mode, or three columns in landscape mode.

OrientationBuilder(
  builder: (context, orientation) {
    return GridView.count(
      // Create a grid with 2 columns in portrait mode,
      // or 3 columns in landscape mode.
      crossAxisCount: orientation == Orientation.portrait ? 2 : 3,
    );
  },
);

Note: If you’re interested in the orientation of the screen, rather than the amount of space available to the parent, use MediaQuery.of(context).orientation instead of an OrientationBuilder widget.