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.

@Er1 I have a problem with centering an AlertDialog, the padding changes when it's landscapeRight & landscapeLeft. I asked the question here: https://stackoverflow.com/questions/62339482/flutter-alert-dialog-not-centered If i can know the right device orientation, i'll be able to fix the AlertDialog Centering Problem — Zeyad Ahmad Aql, Jun 12 '20 at 12:54
This might help https://pub.dev/packages/native_device_orientation — Sami Haddad, Jun 12 '20 at 12:58

score 1 · Answer 1 · answered Jun 12 '20 at 15:06

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

This doesn't answer the question - "I want to get the true device orientation. For example, i want to know whether the device is landscapeRight or landscapeLeft, portraitUp or portraitDown." — Code on the Rocks, Apr 06 '22 at 17:50

score 1 · Answer 2 · answered Apr 06 '22 at 18:07

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

score -1 · Answer 3 · answered Jun 12 '20 at 13:36

here is how i solved the issue previously

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

  Widget _portraitView(){

    // Return Your Widget View Here Which you want to Load on Portrait Orientation.
    return Container(
   width: 300.00,
    color: Colors.green,
    padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
    child: Text(' Portrait View Detected. ',
            textAlign: TextAlign.center,  
            style: TextStyle(fontSize: 24, color: Colors.white)));
  } 

  Widget _landscapeView(){

    // // Return Your Widget View Here Which you want to Load on Landscape Orientation.
    return Container(
    width: 300.00,
    color: Colors.pink,
    padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
    child: Text(' Landscape View Detected.',
            textAlign: TextAlign.center,  
            style: TextStyle(fontSize: 24, color: Colors.white)));
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
        appBar: AppBar(
        title: Text('Detect Device Screen Orientation')),
        body: OrientationBuilder(
          builder: (context, orientation) {
          return Center(

            child: orientation == Orientation.portrait 
            ? _portraitView() 
            : _landscapeView() 

                );
           }
          )
        )
      );
  }
}

Hope it will help you.

Sorry, but it doesn't seem to address the question. The question was how to tell apart `landscapeRight` form `landscapeLeft` and `portraitUp` from `portraitDown`. — Andrey Ozornin, Jun 12 '20 at 15:13

Flutter Get True DeviceOrientation

3 Answers3