Skip to main content
Logo Appt Light

Screen orientation on Flutter

Apps should adapt to the preferred display orientation of the user. Most apps restrict the screen to portrait orientation, but they should also support landscape orientation. Some users have their devices mounted in a fixed orientation (e.g. on the arm of a wheelchair). Therefore, apps need to support both orientations.

With Flutter, multiple screen orientations are enabled by default.

Orientation can be locked by using the setPreferredOrientations method of SystemChrome. Make sure to pass all DeviceOrientation values, or simply remove the code from your app.

By using an OrientationBuilder it is possible to make adjustments based on the orientation of the screen.

// Allow all orientations
SystemChrome.setPreferredOrientations([
  DeviceOrientation.portraitUp,
  DeviceOrientation.portraitDown,
  DeviceOrientation.landscapeRight,
  DeviceOrientation.landscapeLeft
]);

// Listen to orientation changes
OrientationBuilder(
  builder: (context, orientation) {
    return GridView.count(
      // Grid with 2 columns in portrait and 3 columns in landscape
      crossAxisCount: orientation == Orientation.portrait ? 2 : 3,
    );
  },
),

Feedback?

Let us know!