RotatedBox와 SystemChrome에서 방향을 바꾸는 처리가 동시에 달릴 때 혼란스러워서 메모

우선은 RotatedBox만으로 검증

코드

import 'package:flutter/material.dart';
import 'package:flutter/services.dart'; // rootBundle

void main() {
  runApp(MyApp());
}

// MyApp ウィジェットクラス
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.light(),
      home: const RotatedBox(
       // ここをいじる
        quarterTurns: 0,
        child: Text('Hello World!'),
      )
    );
  }
}

quarterTurns가 0이므로, 아직 회전은 하지 않고 통상의 hello world이므로 이런 느낌


quarterTurns를 0에서 1로 변경하면 이런 느낌, 옆으로 기울이면 딱 보기 쉬워진다. 90도 각도를 회전하는 것처럼 보입니다.



quarterTurns를 1에서 2로 변경하면 이런 느낌 1에서 90도, 0에서 180도 바꾼 것 같은 각도가 된다.



quarterTurns를 2에서 3으로 변경하면 마찬가지로 2의 이미지에서 90도, 0에서 세면 270도 회전시킨 hello world가 표시된다.

결론

quarterTurns를 1 올릴 때마다 90도 회전하게 된다.

다음에 SystemChrome과 RotatedBox를 동시에 사용했을 때의 검증

다음은 SystemChrome.setPreferredOrientations를 오른쪽으로 향하고 있을 때 RotatedBox에 의해 UI에 어떤 변화가 생기는지 검증한다. 결론부터 말하면 상당히 심플하고, SystemChrome.setPreferredOrientations로 오른쪽을 향한 뒤 RotatedBox의 quarterTurns의 처리가 달린다.

코드

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() {

  WidgetsFlutterBinding.ensureInitialized();

  SystemChrome.setPreferredOrientations([
    DeviceOrientation.landscapeRight,
  ]);
  runApp(MyApp());
}

// MyApp ウィジェットクラス
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.light(),
      home: const RotatedBox(
        quarterTurns: 0,
        child: Text('Hello World!'),
      )
    );
  }
}

SystemChrome은 hot reload로 업데이트되지 않았으므로 다시 빌드

위의 코드라면 SystemChrome에서 widget 모두가 오른쪽으로 회전하므로 아래 그림과 같이 된다.
quarterTurns는 0이므로 RotatedBox의 회전 처리는 아직 수행되지 않았습니다.


quarterTurns를 1로 변경, 이것도 간단하게 생각하면 좋고, SystemChrome에서 오른쪽을 향한 hello world를 90도 회전시킨다고 하는 이미지로 ok, 이미지는 아래와 같은 느낌



마찬가지로 QuarterTurns : 2라면 오른쪽 방향에서 180도, 3이라면 오른쪽 방향에서 270도 회전하는 이미지가 된다.