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

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

Answer 2

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 3

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.