How to Detect Orientation Change in Layout In Flutter?

When an app is displaying in landscape orientation there is much less height available. This makes it impossible to vertically list all of our widgets as there is just not enough space for all of this so in this article we will go through how to Detect Orientation Change in layout in flutter?

In this blog post, we’ll guide you through the process of detecting orientation changes in Flutter layouts. If you want your app to respond dynamically to device orientation changes, this concise guide is here to help you understand the techniques and steps involved. Learn how to detect orientation changes, adapt your layout based on portrait or landscape mode, and ensure a seamless user experience across different screen orientations. With practical examples and clear instructions, you’ll be equipped to create responsive and adaptable Flutter layouts that gracefully adjust to device rotations.

Detect Orientation Change in Layout In Flutter

In order to determine the Orientation of the screen, we can use the OrientationBuilder Widget.

The OrientationBuilder will determine the current Orientation and rebuild when the Orientation changes.

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

You can find the complete example here: https://flutter.io/cookbook/design/orientation/

Now You can use MediaQuery to check orientation:

var isPortrait = MediaQuery.of(context).orientation == Orientation.portrait

So That’s quite easy

if (MediaQuery.of(context).orientation == Orientation.portrait){
    // is portrait
}else{
// is landscape
}

OrientationBuilder(


 builder: (context, orientation) {
      return orientation == Orientation.portrait
          ? SafeArea(
          child: Scaffold(
              body: PortraitMode(context)
          )
      )
          : LandscapeMode(context);

    }
);

Following functions can be used to change the orientation:
Portrait Mode Only

/// blocks rotation; sets orientation to: portrait
void _portraitModeOnly() {
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.portraitUp,
    DeviceOrientation.portraitDown,
  ]);
}

And Landscape mode only

/// blocks rotation; sets orientation to: landscape
    void _landscapeModeOnly() {
      SystemChrome.setPreferredOrientations([
    DeviceOrientation.landscapeLeft,
    DeviceOrientation.landscapeRight,
      ]);
    }

Enable Portrait and LandScape

void _enableRotation() {
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.portraitUp,
    DeviceOrientation.portraitDown,
    DeviceOrientation.landscapeLeft,
    DeviceOrientation.landscapeRight,
  ]);
}

My variant

In global scope set global ValueNotifier:

final ValueNotifier<bool> IS_PORTRAIT = ValueNotifier<bool>(true);

So in a scaffold scope change value of our global ValueNotifier

return Scaffold(
        key: scaffoldKey,
        body: OrientationBuilder(
          builder: (BuildContext context, Orientation orientation) {
            IS_PORTRAIT.value = orientation == Orientation.portrait;
            return MyBody();
          },
        ),
);

Anywhere listen to the current orientation

return ValueListenableBuilder(
                  valueListenable: IS_PORTRAIT,
                  builder: (BuildContext context, value, Widget child) {
                     return Container(
                      color: Colors.green[100],
                      child: Container(),
                      height: (IS_PORTRAIT.value)? 150: 80,
                    );
                  },
                );

Conclusion:

Thanks for reading!! hope you have learned from this article!! If not tell us in the comments what do you still need to know?

So in this article, we have been through how to detect orientation change in layout in flutter ??

Do not forget to drop your valuable suggestions/feedback. We would love to assist you.

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

FlutterAgency.com is one of the most popular online portals dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge of Flutter.

Written by Abhishek Dhanani

Abhishek Dhanani, a skilled software developer with 3+ years of experience, masters Dart, JavaScript, TypeScript, and frameworks like Flutter and NodeJS. Proficient in MySQL, Firebase, and cloud platforms AWS and GCP, he delivers innovative digital solutions.