How to Prevent Device Orientation in Flutter?

How to Prevent Device Orientation in Flutter?

While building a Flutter Mobile Application you might have faced a problem where UI Build in Portrait Mode might not be working properly in Landscape Mode. So does the user needs to design a screen separate for Portrait Mode or Landscape Mode? The answer is Big No. We will learn about the same in Flutter.

How to Prevent Device Orientation in Flutter?

First Import

package:flutter/services.dart

Put the SystemChrome.setPreferredOrientations inside the Widget build() method.

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

Update

This solution mightn’t work for some IOS devices as mentioned in the updated flutter documentation on Oct 2019.

They Advise to fixed the orientation by setting UISupportedInterfaceOrientations in Info.plist like below:

<array>
    <string>UIInterfaceOrientationPortrait</string>
</array>

For more information https://github.com/flutter/flutter/issues/27235#issuecomment-508995063

If you want to “lock” the device orientation and not allow it to change as the user rotates their phone, this was easily set as below.

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

This will works always for lock screen Orientation.

iOS:

Calling SystemChrome.setPreferredOrientations() doesn’t work for me, and I had to change the Device Orientation in the Xcode project as following:

Android:

Set the screen orientation attribute to portrait for the main activity in the file android/app/src/main/AndroidManifest.xml as following:

android:screenOrientation="portrait"

If you have this:

<activity
        android:name=".MainActivity"
        android:launchMode="singleTop"
        android:theme="@style/LaunchTheme"
        android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
        android:hardwareAccelerated="true"
        android:windowSoftInputMode="adjustResize">

You should end up with something like this:

<activity
        android:name=".MainActivity"
        android:launchMode="singleTop"
        android:theme="@style/LaunchTheme"
        android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
        android:hardwareAccelerated="true"
        android:screenOrientation="portrait"
        android:windowSoftInputMode="adjustResize">

To force in Landscape Mode:

void main() {
      SystemChrome.setPreferredOrientations(
          [DeviceOrientation.landscapeLeft,DeviceOrientation.landscapeRight])
          .then((_) => runApp(MyApp()),
      );

Conclusion:

So in this article, we have learned about Prevent Device Orientation in Flutter.

Thanks for Reading!!!
Keep Learning.

Do let us know if you need any assistance with Flutter Development?

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

FlutterAgency.com is one of the most popular online portals dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge of Flutter.