Flutter Change/Lock Device Orientation to Portrait/Landscape Only

While developing your Flutter app, you may have a requirement to disable, change or lock the device orientation to only a portrait or landscape mode. Changing/Locking the device orientation helps you increase the user experience of your app. So in this tutorial, we’ll learn how to change/lock device orientation to portrait/landscape only in Flutter.

Here’s what we’ll cover:

• The Need
• App wide: Steps to Change/Lock Device Orientation to Portrait/Landscape only in Flutter
• Change Device Orientation for Specific Screen
• Changing Device Orientation Programmatically (on- demand)
• For iOS

The Need

The ultimate need to change device orientation is to improve the user experience. But to be specific, you may want to disable a landscape mode and only allow the portrait mode on a page that has a long form. Another example is changing the device orientation to landscape mode when a user wants to see a video in fullscreen mode.

App wide: Steps to Change/Lock Device Orientation to Portrait/Landscape only in Flutter

To app-wide change/lock device orientation to portrait/landscape only in Flutter, you can use the SystemChrome.setPreferredOrientations method and allow the list of orientations that you want to set.

Steps:

Step 1: Open the main.dart and add the import ‘package:flutter/services.dart’; import statement at the top.

Step 2: Just after void main(), call the WidgetsFlutterBinding.ensureInitialized(); method.

Step 3: After WidgetsFlutterBinding.ensureInitialized(); method add the SystemChrome.setPreferredOrientations and add the orientation such as DeviceOrientation.portraitUp, DeviceOrientation.portraitDown or DeviceOrientation.landscapeLeft, DeviceOrientation.landscapeRight.

Step 3: Restart the app.

Portrait Mode Code Example:

import 'package:flutter/material.dart';
// Step 1
import 'package:flutter/services.dart';
import 'device_orientation/device_orientation_demo.dart';
void main() {
  // Step 2
  WidgetsFlutterBinding.ensureInitialized();
  // Step 3
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.portraitUp,
    DeviceOrientation.portraitDown,
  ]).then((value) => runApp(MyApp()));
  runApp(MyApp());
}

Note: The above code will lock the screen to be displayed only in portrait mode i.e vertically (either up or down) even if the phone is rotated in landscape mode.

Landscape Mode Code Example:

import 'package:flutter/material.dart';
// Step 1
import 'package:flutter/services.dart';
import 'device_orientation/device_orientation_demo.dart';
void main() {
  // Step 2
  WidgetsFlutterBinding.ensureInitialized();
  // Step 3
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.landscapeLeft,
    DeviceOrientation.landscapeRight,
  ]).then((value) => runApp(MyApp()));
  runApp(MyApp());
}

Note: The above code will lock the screen to be displayed only in landscape mode i.e horizontally (either left or right) even if the phone is rotated in portrait mode.

You can set the orientation in the following four modes:

enum DeviceOrientation {
  /// If the device shows its boot logo in portrait, then the boot logo is shown
  /// in [portraitUp]. Otherwise, the device shows its boot logo in landscape
  /// and this orientation is obtained by rotating the device 90 degrees
  /// clockwise from its boot orientation.
  portraitUp,
  /// The orientation that is 90 degrees clockwise from [portraitUp].
  ///
  /// If the device shows its boot logo in landscape, then the boot logo is
  /// shown in [landscapeLeft].
  landscapeLeft,
  /// The orientation that is 180 degrees from [portraitUp].
  portraitDown,
  /// The orientation that is 90 degrees counterclockwise from [portraitUp].
  landscapeRight,
}

Output:

Change Device Orientation for Specific Screen

Sometimes you may want to set/lock/disable the device orientation for a specific screen only. For example, you can allow users to see a full-screen video only in landscape mode even if the phone is in portrait mode.

To change device orientation for a specific screen:

Step 1: Open the screen in which you want to set the orientation.

Step 2: Add the init() method and then call the SystemChrome.setPreferredOrientations method to set only landscape mode.

Step 3: Add the dispose method and then call the SystemChrome.setPreferredOrientations method to again allow all modes.

Code Example:

// Step 2
void initState() {
  super.initState();
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.landscapeRight,
    DeviceOrientation.landscapeLeft,
  ]);
}
// Step 3
@override
dispose() {
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.landscapeRight,
    DeviceOrientation.landscapeLeft,
    DeviceOrientation.portraitUp,
    DeviceOrientation.portraitDown,
  ]);
  super.dispose();
}

Output:

Changing Device Orientation Programmatically (on- demand)

To change the device orientation on click of button i.e programmatically, you can call the same method as SystemChrome.setPreferredOrientations method and allow the list of orientations that you want to change.

Steps:

Step 1: Add the button or widget on click of which, you would like to change orientation.

Step 2: Inside onPressed or onTap method add the SystemChrome.setPreferredOrientations and add the orientation such as DeviceOrientation.portraitUp, DeviceOrientation.portraitDown, etc.

Code Example:

ElevatedButton(
  onPressed: () {
    SystemChrome.setPreferredOrientations(
        [DeviceOrientation.portraitUp]);
  },
  child: const Text(
    'Submit',
    style: TextStyle(fontSize: 24),
  ),
),

Output:

For iOS

If the above code doesn’t work for you, you can try manually setting the device orientation in Xcode.

To manually set the device orientation in Xcode:

• Open your project in Xcode.
• Click Runner.
• Under the Deployment info, find the Device Orientation and choose the orientation that you want to keep.

Note: This approach locks the orientation for the whole app.

Another way of doing this if you don’t have Xcode is to open theios/Runner/Info.plistfile and find the UISupportedInterfaceOrientations key. Add the orientation that you want to support.

With Xcode:

Without Xcode:

<key>UISupportedInterfaceOrientations</key>
<array>
 <string>UIInterfaceOrientationPortrait</string>
 <string>UIInterfaceOrientationLandscapeLeft</string>
 <string>UIInterfaceOrientationLandscapeRight</string>
</array>

Conclusion

In this tutorial, we learned how to change/lock device orientation to portrait/landscape only in Flutter with practical examples. We first saw the need to disable the orientation and then saw how to do it app-wide as well as on a specific screen. We also understood what to do given approach doesn’t work on iOS devices.

Would you like to check other interesting Flutter tutorials?