Flutter Get True DeviceOrientation

Question

I'm using the lines below to get the device orientation

if (MediaQuery.of(context).orientation == Orientation.landscape) // Landscape
  {
    // Do Something
  }
else // Portrait
  {    
    // Do Something Else
  }

I want to get the true device orientation. For example, i want to know whether the device is landscapeRight or landscapeLeft, portraitUp or portraitDown.

Can someone help me with this? Thanks in advance.

Answer 1

There is a widget OrientationBuilder that can help you with that

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,
    );
  },
);

I see you're trying to use it with a dialog to center it, if you take a look to the code of the dialog, you will see it uses a ConstraninedBox and a Step of 56.0 for a padding (it will expand its size with a step of 56.0 if the screen allows it). You can wrap the content of the AlertDialog with your own ConstrainedBox and calculate your min and max size to make it look centered, a square, tall rectangle, etc.

final size = MediaQuery.of(context).size;
            double actionHeight = 16.0 + 36.0; //The size of the action widget, 8 padding top and bottom (16), and if ButtonBarTheme.buttonHeight == null it defaults to 36 minHeight
return AlertDialog(
   scrollable: true,
   title: Text('Title'),
   content: ConstrainedBox(
     constraints: BoxConstraints(
       minWidth: (size.width / 2) - actionHeight, //do the math you want here
       maxWidth: (size.width / 2) - actionHeight, //do the math you want here
       minHeight: (size.height/ 2) - actionHeight, //do the math you want here
       maxHeight: (size.height/ 2) - actionHeight //do the math you want here
     ),
     child: SingleChildScrollView(
       child: Column(
         children: [
           for(int i = 0; i < 4; i++)
             ListTile(
               title: Text('Text $i'),
               trailing: i % 2 == 0 ? 
                 Icon(Icons.check_box) : Icon(Icons.check_box_outline_blank)
             )
           ],
         )
       )
     ),
   actions: [
      FlatButton(child: Text('Cancel'), onPressed: () => Navigator.pop(context)),
      FlatButton(child: Text('Ok'), onPressed: () => Navigator.pop(context))
   ],
);

You can combine both OrientationBuilder and ConstrainedBox to do some math based on the orientation and make it look as you want

Answer 2

To reiterate the question, we need a way to know when the device orientation is:

• portraitUp
• portraitDown
• landscapeLeft
• landscapeRight

Based on this issue, the OrientationBuilder widget that comes with Flutter doesn't give you this information. Instead, it gives you the orientation of the parent widget (either portrait or landscape).

Welcome the native_device_orientation package. This package has a NativeDeviceOrientationReader widget that acts like OrientationBuilder.

NativeDeviceOrientationReader(
  builder: (context) {
     NativeDeviceOrientation orientation = NativeDeviceOrientationReader.orientation(context);

     return Center(child: Text(orientation.toString()))
  },
),