Flutter页面切换时先横屏再恢复竖屏（portraitUp）如何解决？

排查页面内的屏幕方向设置 #

先检查是否有页面在initState或构建流程中强制设置了横屏，比如调用SystemChrome.setPreferredOrientations指定横屏方向，但未在页面销毁时恢复竖屏。这种场景下切换页面时，前一个页面的横屏设置会先生效，随后被目标页面的竖屏配置覆盖，从而引发闪屏。

解决方法：

• 在设置横屏的页面的dispose方法中恢复默认竖屏：

@override
void dispose() {
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.portraitUp,
  ]);
  super.dispose();
}

• 确保目标页面无多余的方向设置，或在initState中明确指定竖屏，避免配置冲突。

统一全局屏幕方向配置 #

如果App多数页面为竖屏，可在启动时全局锁定竖屏，仅在需要横屏的页面临时切换，退出后立即恢复。

在main函数中设置全局默认方向：

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await SystemChrome.setPreferredOrientations([
    DeviceOrientation.portraitUp,
  ]);
  runApp(const MyApp());
}

处理路由切换时的方向过渡冲突 #

若问题出在Navigator跳转过程中，可尝试自定义路由过渡逻辑，避免方向切换与页面动画同时触发。

示例：使用PageRouteBuilder确保过渡完成后再处理方向（如需）：

Navigator.push(
  context,
  PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => const TargetPage(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      return FadeTransition(
        opacity: animation,
        child: child,
      );
    },
    transitionDuration: const Duration(milliseconds: 300),
  ),
);

检查原生层的屏幕方向配置 #

• Android：打开AndroidManifest.xml，检查activity标签的screenOrientation属性，若误设为sensor或landscape会导致系统层面的方向干扰。修改为锁定竖屏：

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

• iOS：编辑Info.plist，确保UISupportedInterfaceOrientations和UISupportedInterfaceOrientations~ipad仅包含竖屏方向（特殊页面除外）：

<key>UISupportedInterfaceOrientations</key>
<array>
    <string>UIInterfaceOrientationPortrait</string>
</array>
<key>UISupportedInterfaceOrientations~ipad</key>
<array>
    <string>UIInterfaceOrientationPortrait</string>
</array>

禁止在build方法中设置屏幕方向 #

build方法会被多次调用，若在此处设置方向，会重复触发方向变更，引发闪屏。仅在initState、dispose或用户交互事件中执行方向配置操作。

内容的提问来源于stack exchange，提问作者Mert