DISCOVER FLUTTER — WEEK #22

Change Screen Orientation In Flutter

Jelena Jovanoski

Jan 26·2 min read

Screen orientation is very important from the user’s point of view, especially when it comes to mobile games. In that case, you may need to set the orientation of the application to fix direction.

In this article, we will learn how to set the screen orientation and how to extract information about which type of orientation is currently set.

Setting Screen Orientation

1. Import the services package.

import 'package:flutter/services.dart';

2. Change the main() method, and apply the following code:

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

setPrefferedOrientations of the SystemChrome class is the key method in which you can set preferred orientation. For this method, we need to use then because its return type is Future object.

Note: If you need the binding to be initialized before the runApp method, you need to call the ensureInitialized() method of the WidgetsFlutterBinding class.

Setting to Portrait Mode Only

To achieve portrait only effect, it is necessary to pass the following parameters to the setPrefferedOrientations method:

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

Note: The code ensures that the application rotates if you tilt the phone upside down. If you do not want such an effect, then choose one between portraitUp or portraitUp .

Setting to Landscape Mode Only

To achieve landscape only effect, it is necessary to pass the following parameters to the setPrefferedOrientations method:

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

Note: You can address either landscapeLeft or landscapeRight to make it work only in one way.

Getting device orientation

If during coding you need to perform some orientation-oriented operations, you can easily get the current orientation (Orientation object) with the help of MediaQuery:

MediaQuery.of(context).orientation

Conclusion

If you’re a fan of short, interesting articles covering various Flutter topics and you want to get into the habit of learning Flutter with me over the next 8 weeks, you can read my articles every Tuesday.

If you have any questions or comments about this article, let me know in the comments section.

For those who want to jump into our Flutter journey, links from the previous weeks can be found below:

• Week #18 — “Combine Multiple Styles Per Line With RichText in Flutter”
• Week #19 — “My January Recommendations for Flutter Packages”
• Week #20 — “Top 5 Reasons to Learn Flutter in 2021”

See you next week, don’t break the streak!