🙆

Flutter 画面の向きを変える(ipad対応)(一つの画面のみ対応)

1 min read

書いた日2021/11/04

こんにちはエンデバーです
Flutterで画面の向きを変える方法を紹介します。
ipadのバグ?や一つの画面だけ横向きにしたいって方も参考になると思います。

準備編

※androidは設定は必要ありません。

ios

ステップ1 Xcode Info.plist


がある事を確認。普通なら最初から入ってると思う。

ステップ2 (ipadを使う方) Runner


をチェックをする

※これがないとiPadは向きは変わりません。

画面の向きを変える

アプリ全体の向きを変える

main.dartの一番上

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setPreferredOrientations([DeviceOrientation.landscapeRight])
      .then((_) {
    runApp(const MyApp());
  });
  SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersive);
}

アプリの1画面を横向きに変える

皆さんいろんな状態管理をしていると思いますので、
書き方が色々ありますが、stfの場合で書きます。

initStateの中


void initState() async {
  super.initState();
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.landscapeRight,
  ]);
}

disposeの中


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

この画面が終わる時にdisposeで戻しましょう。

画面の向きの方向のオプション

(定義)

スマホのカメラついている方を頭とし,
アプリのAppBarを上として

 DeviceOrientation.landscapeRight,//頭が左
 DeviceOrientation.landscapeLeft,//頭が右
 DeviceOrientation.portraitDown,//頭が下
 DeviceOrientation.portraitUp,//頭が上

なぜかこの記事を調べていると

内に二つもプロパティ入れている方いますが、

 SystemChrome.setPreferredOrientations([
     DeviceOrientation.portraitDown,
     DeviceOrientation.portraitUp,//こっちのみ反映
 ]);

一番下のプロパティしか反映されません。

Discussion

ログインするとコメントできます