How to Detect Orientation Change in Layout In Flutter ??

· 3 min read
How to Detect Orientation Change in Layout In Flutter
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 ??

How to 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 GuideFlutter ProjectsCode 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.

Leave a Reply