DEV Community

Cover image for How to change screen orientation in Flutter
Mighty
Mighty

Posted on • Edited on • Originally published at mightytechno.com

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';
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 |Youtube

Top comments (4)

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
Mighty

Cool 😀

Collapse
 
amitgoyal360 profile image
Amit Goel

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

Collapse
 
naif_alluhaidanengr_aa profile image
Naif Alluhaidan (Engr)

i wan to change my layout from landscape to portrait and vice versa inside my app (depending on the rotation of the device by the user)