close

flutter: how to prevent device orientation changes and force portrait?

While building a Flutter Mobile Application you may have confronted an issue where UI Build in Portrait Mode probably won’t be working appropriately in Landscape Mode. So does the client needs to plan a screen separate for Portrait Mode or Landscape Mode? The appropriate response is Big No. We will find out about the equivalent in Flutter.

How to Prevent Device Orientation in Flutter?

First Import


package:flutter/services.dart

Put the SystemChrome.setPreferredOrientations inside the Widget assemble() strategy.

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

Update

This arrangement mightn’t work for certain IOS gadgets as referenced in the refreshed ripple documentation on Oct 2019. They Advise to fixed the direction by setting UISupportedInterfaceOrientations in Info.plist like underneath:

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

On the off chance that you need to “lock” the gadget direction and not permit it to change as the client pivots their telephone, this was effectively set as beneath.

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

This will turns out consistently for lock screen Orientation.

Table of Contents

iOS:

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

Prevent Device Orientation Flutter

Android:

Set the screenOrientation quality to picture for the principle movement in the record android/application/src/fundamental/AndroidManifest.xml as following:

Android Prevent Device Orientation Flutter
Android Prevent Device Orientation Flutter
android:screenOrientation="portrait"

In the event that 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 wind 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()),
      );

Summery

It’s all About this issue. Hope all solution helped you a lot. Comment below Your thoughts and your queries. Also, Comment below which solution worked for you? Thank You.

Also Read

Leave a Comment