How to change screen orientation in Flutter

The mobile application usually develops to support both in portrait and landscape mode without any issue. But in some special case, you may need to set the orientation of the application to fix direction to get proper real state space to each component

Set the orientation in flutter

First, you have to import the services package.

 import 'package:flutter/services.dart';

Next, you can set orientation by setting the value to setPreferredOrientations method in SystemChrome class. In the Flutter the application entry point is the main method. So you can set orientation before call the runApp method in the main method. But if you need to call a binding before the runApp method, you must call the ensureInitialized method in WidgetsFlutterBinding class.

        void main() {
          WidgetsFlutterBinding.ensureInitialized();
          SystemChrome.setPreferredOrientations([DeviceOrientation.landscapeLeft]).then((_){
           runApp(MyApp());
          });
        } 

Set landscape orientation only

SystemChrome.setPreferredOrientations([DeviceOrientation.landscapeLeft,DeviceOrientation.landscapeRight])

You can set either landscapeLeft or landscapeRight to make it work in one way.

Set portrait orientation only

 SystemChrome.setPreferredOrientations([DeviceOrientation.portraitDown,DeviceOrientation.portraitUp])

If you set both portraitUp and portraitDown as orientation when you tilt your phone upside down it will rotate the app. If you don’t like to work in upside-down orientation, you can just set only the portraitUp.

Change orientation dynamically

This is the same as above, you just need to use the same method when clicking a button or trigger some action.

        RaisedButton(
              child: Text("Portrait"),
              onPressed: (){
              SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);
            })

Get device orientation

It quite easy to get current orient in flutter app using MediaQuery

MediaQuery.of(context).orientation

This will return Orientation object and you can check is the portrait or landscape like below

MediaQuery.of(context).orientation == Orientation.landscape

By using this method, you can check orientation changes in layout and based on the orientation you can set the layout values.