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

Originally published at mightytechno

Connect with me - Instagram |Blog |Youtube

Comments

[Júnior Pacheco]

I have utilized this information for my app.
Thank you my friend and keep helping the comunity.

[Mighty]

Cool 😀

[Amit Goel]

There is a list of apps. How to set orientation of a particular app from the list?