DEV Community

loading...
Cover image for How to change screen orientation in Flutter

How to change screen orientation in Flutter

Mighty
Just an another Developer 😊
Originally published at mightytechno.com Updated on ・2 min read

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';
Enter fullscreen mode Exit fullscreen mode

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());
   });
 } 
Enter fullscreen mode Exit fullscreen mode

Set landscape orientation only

SystemChrome.setPreferredOrientations([DeviceOrientation.landscapeLeft,DeviceOrientation.landscapeRight])
Enter fullscreen mode Exit fullscreen mode

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

Set portrait orientation only

SystemChrome.setPreferredOrientations([DeviceOrientation.portraitDown,DeviceOrientation.portraitUp])
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

Get device orientation

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

MediaQuery.of(context).orientation
Enter fullscreen mode Exit fullscreen mode

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

 MediaQuery.of(context).orientation == Orientation.landscape
Enter fullscreen mode Exit fullscreen mode

Originally published at mightytechno

Connect with me - Instagram |Blog |Twitter

Discussion (3)

Collapse
jrpacheco profile image
Júnior Pacheco

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

Collapse
mightytechno profile image
Collapse
amitgoyal360 profile image
Amit Goel

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

Forem Open with the Forem app