Flutter를 사용하여 회전할 때 방향을 바꿀 수 있는지 화면으로 전환할 수 있는지 여부

앱 안에서 회전이 가능한지, 화면마다 달라지는데, 이게 실용성에서 가능한지는 모르겠지만, iOS와 안드로이드 동작을 먼저 확인해 문제가 없으니 기록해 두겠다.

절차.

로컬 프로젝트 설정

iOS와 안드로이드의 모국어 설정에서 화면이 회전하는 모든 방향을 허용합니다.
기본적으로 모든 방향이 허용되기 때문에 특별한 변경 없이 대응할 필요가 없다.

Fluter 설치

MaterialApp의 navigatorObservers에 감시 화면 이동의 종류를 추가합니다.이 클래스에서 이동 목표 화면을 확인한 후 회전할 때마다 허용된 방향 설정을 변경합니다.
root_app.dart

class RootApp extends StatelessWidget {
  const RootApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const HomeScreeen(),
      navigatorObservers: [
        // 画面遷移を監視するためのクラス
        MyNavigatorObserver(),
      ],
    );
  }
}

감시 화면 이동의 종류는 다음과 같다.
my_navigator_observer.dart

class MyNavigatorObserver extends NavigatorObserver {
  @override
  void didPush(Route route, Route? previousRoute) {
    // 新しい画面に遷移したとき
    super.didPush(route, previousRoute);

    if (route.settings.name == RotatableScreen.name) {
      // 回転を許可する画面の場合
      SystemChrome.setPreferredOrientations([
        // 縦向きと横向きを許可する方向として登録する
        DeviceOrientation.portraitUp,
        DeviceOrientation.landscapeLeft,
        DeviceOrientation.landscapeRight,
      ]);
    } else {
      // 回転を許可しない画面の場合
      SystemChrome.setPreferredOrientations([
        // 縦向きのみを許可する方向として登録する
        DeviceOrientation.portraitUp,
      ]);
    }
  }

  @override
  void didPop(Route route, Route? previousRoute) {
    // 前の画面に戻ったとき
    super.didPop(route, previousRoute);

    if (route.settings.name == RotatableScreen.name) {
      // 回転を許可する画面の場合
      SystemChrome.setPreferredOrientations([
        DeviceOrientation.portraitUp,
        DeviceOrientation.landscapeLeft,
        DeviceOrientation.landscapeRight,
      ]);
    } else {
      SystemChrome.setPreferredOrientations([
        DeviceOrientation.portraitUp,
      ]);
    }
  }
}

회전을 허용하려는 대상인지 아닌지를 판단하는 방법은 다양하지만, 위 방법에서는 화면 이동에서 호출Navigator.push할 때 부여RouteSettings.name 고유의 문자열을 전제로 이 설정값을 판정에 사용한다.

// 画面遷移処理
Navigator.push<void>(context, RotatableScreen.route());

// RotatableScreen
class RotatableScreen extends StatelessWidget {
  const RotatableScreen({Key? key}) : super(key: key);

  static const name = 'RotatableScreen';

  static MaterialPageRoute route() => MaterialPageRoute<RotatableScreen>(
        builder: (_) => const RotatableScreen(),
        settings: const RouteSettings(name: name),
      );

  @override
  Widget build(BuildContext context) {
  // ...

참고 자료

https://qiita.com/osamu1203/items/6172df89f5270060a44d