How to turn off screen rotation animation while switching from landscape to portrait and vice versa

Question

In app during some transitions between screens (from app mode with veritical lock to game mode with horizontal lock ) I use

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

to switch users between screen orientations, but sometimes this animation looks laggy on low-to-mid-end devices

Is it possible in flutter to skip or for example speed up screen rotation animation?

Or maybe someone know workaround without using setPreferredOrientations

What about showing a `CircularProgressIndicator` while the animation is going on? — stacktrace2234, Jul 07 '22 at 13:21

dengST30 · Answer 1 · 2022-07-07T14:46:12.503

1

for using setPreferredOrientations while Flutter app in iOS devices

as I tested, for using setPreferredOrientations while Flutter app in Android devices, there is no device rotation

edited Jul 07 '22 at 14:46

answered Jul 07 '22 at 14:38

dengST30

3,643
24
25

Thank you for your answer, you got that I was asking about animation during orientation change, right? – Simon Sot Jul 08 '22 at 07:58
for: Or maybe someone know workaround without using setPreferredOrientations – dengST30 Jul 08 '22 at 08:12
not very possible in flutter to skip or for example speed up screen rotation animation – dengST30 Jul 08 '22 at 08:12
as I know , Flutter app in iOS side is FlutterViewController. So rotation is the native thing. – dengST30 Jul 08 '22 at 08:13
ok I got your point - then how do you change in-app orientation with this aproach? – Simon Sot Jul 08 '22 at 08:13
Open iOS project workplace with Xcode, then do as the page. If you own the app. – dengST30 Jul 08 '22 at 08:21

lepsch · Answer 2 · 2022-07-14T22:51:34.830

1

To lock the screen orientation to landscape on both iOS and Android do the following. This would make the app start in landscape mode from the beginning.

iOS - Info.plist

Locate the file ios/Runner/Info.plist and change/add the UISupportedInterfaceOrientations key (or UISupportedInterfaceOrientations~ipad key for iPadOS) like so (Docs reference).

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>

    <!-- ... removed initial keys for clarity ... -->

    <key>UISupportedInterfaceOrientations</key>
    <array>
        <string>UIInterfaceOrientationLandscapeLeft</string>
        <string>UIInterfaceOrientationLandscapeRight</string>
    </array>
    <key>UISupportedInterfaceOrientations~ipad</key>
    <array>
        <string>UIInterfaceOrientationLandscapeLeft</string>
        <string>UIInterfaceOrientationLandscapeRight</string>
    </array>
</dict>
</plist>

Android - AndroidManifest.xml

Locate the file android/app/src/main/AndroidManifest.xml and change/add the activity attribute android:screenOrientation="landscape" (Docs reference).

<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.example">
   <application
        android:label="Example"
        android:name="${applicationName}"
        android:icon="@mipmap/ic_launcher">
        <activity
            android:screenOrientation="landscape"
            ...
        >

            <!-- ... removed this section for clarity ... -->

        </activity>
        <meta-data
            android:name="flutterEmbedding"
            android:value="2" />
    </application>
</manifest>

edited Jul 14 '22 at 22:51

answered Jul 14 '22 at 22:33

lepsch

8,927
5
24
44

I've interpreted the question `How to turn off screen rotation animation while switching from landscape to portrait and vice versa` this way. It looks like it's a bit ambiguous as `animation` in this context could be just the consequence of rotating or the exact thing you're trying to disable. I.e. `How to turn off the rotation?` or `How to turn off the rotation's animation?`. Anyway, I think it's not possible to disable the animation _per se_ as it's native to the OS. Good luck! – lepsch Jul 15 '22 at 09:34
Anything in flutter is native to OS one way or another :) Thank you anyway – Simon Sot Jul 15 '22 at 09:41
Do you need this for both `Android` and `iOS`? – lepsch Jul 15 '22 at 09:45
mainly yes, I understand the state of flutter web for now, so no biggie if it is only mobile oriented solution, why you ask? – Simon Sot Jul 15 '22 at 09:48
I was looking for a solution to this for a long time and tbh had no expectation someone will help. I was interested if someone could explain at least why this is not possible – Simon Sot Jul 15 '22 at 09:51
1

It's actually possible if you create a native plugin for `Android` and/or `iOS`. Take a look on [this question for iOS](https://stackoverflow.com/questions/4290050/disable-orientation-change-rotation-animation) and [this other one for Android](https://stackoverflow.com/a/21165739/2828341) – lepsch Jul 15 '22 at 09:57
yep, I saw that articles, thats why was asking if that was a thing for flutter, looks like I would really had to write a package on this feature myself – Simon Sot Jul 15 '22 at 10:01

score 1 · Accepted Answer · answered Jul 18 '22 at 05:54

The idea is that, static lock the app's screen orientation ,

then detect screen orientation changes,

finally, DIY your screen rotation logics.

no animation is also OK.

Firstly, do as @dengST30's answer

and simple SystemChrome.setPreferredOrientations is sufficient

Secondly, detect screen orientation changes

in iOS, native code again:

register notification:

NotificationCenter.default.addObserver(self, selector: #selector(AppDelegate.rotated), name: UIDevice.orientationDidChangeNotification, object: nil)

rotation detected:

@objc func rotated() {
    if UIDevice.current.orientation.isLandscape {
         print("Landscape")
    }
    else if UIDevice.current.orientation.isPortrait {
         print("Portrait")
    }
}

thirdly, you can skip or speed up screen rotation animation, now

write your own animation and UI transform code now.

How to turn off screen rotation animation while switching from landscape to portrait and vice versa

3 Answers3

iOS - Info.plist

Android - AndroidManifest.xml