【Flutter】画面を縦向き・横向きに固定したまま表示させる方法！iPadで画面の向きを固定できない時の対処方法

こんにちは。
個人でアプリ開発をしているYuKiOです。

21年12月に12作目となるアプリとして「緊急警告メーカー」をリリースしました。

横画面に固定して使用するアプリだったのですが、iPadでは横向きに固定できない表示不具合が・・・。

別にiPad版はリリース予定はないので問題なしと考えていたのですが、AppStoreの審査に提出したところ、iPhone版だけであっても、iPadに互換インストール可能なため正常に動作する必要があるとのことで、無視できませんでした笑

今回は、Flutterで画面を縦向き・横向きに固定したままにする方法と、iPadのみ発生する画面の向きを固定できないという不具合の解消方法を紹介します。

新作アプリをリリース🚗#煽り運転 に遭遇！

車を止められ、激怒した相手が降りてきたら・・・怖いっ😭

こんな時、こんな 煽り運転 対策アプリがあったらいいのでは？と思って作ってみました！

煽り運転反対の人は、いいねとリツイート頂けると泣いて喜びます！

■iOS版https://t.co/KUsEefQwsb pic.twitter.com/C2asA7ozdp

— YuKiO｜アプリ個人開発｜Flutter × Firebase | スケルカメラリリースしました (@oo_forward) December 23, 2021

Flutterで縦・横に画面を固定する方法

アプリの向きを固定する場合は、最初のMain関数を呼ぶタイミングで下記を追加します。runAppを呼ぶより前に実装する方法があります。
許可したい向きだけ「DeviceOrientation」を追加します。

main.dart

import 'package:flutter/services.dart';
void main() async {
  WidgetsFlutterBinding.ensureInitialized(); //これ入れないとダメだったと思います。
  await SystemChrome.setPreferredOrientations([
//許可する向きを指定する。
   DeviceOrientation.portraitUp,//上向きを許可 
   DeviceOrientation.portraitDown,//下向きを許可
   DeviceOrientation.landscapeLeft,//左向きを許可
   DeviceOrientation.landscapeRight,//右向きを許可
  ]);
  runApp(const MyApp());
}

場合によっては、「スクリーンによって向きを変えたい！」なんてわがままな人もいると思います。

そんな時は該当スクリーンをStatefulWidgetにし、下記を追加して向きを指定します。

you_are_selfish.dart

import 'package:flutter/services.dart';
class YouAreSelfish extends StatefulWidget {
  YouAreSelfish({Key? key}) : super(key: key);

  @override
  _YouAreSelfishState createState() => _YouAreSelfishState();
}

class _YouAreSelfishState extends State<YouAreSelfish> {

//このページだけの設定を追加。
  @override
  void didChangeDependencies() async {
    await SystemChrome.setPreferredOrientations([
      DeviceOrientation.landscapeLeft,
      DeviceOrientation.landscapeRight,
    ]);
    super.didChangeDependencies();
  }

//基本的に、pushで画面推移しているなら、
//画面が消えるので必要ありませんが、
//何かの理由で画面の向きを戻すなら、

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

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

iPadだけ向きが固定できない問題

XcodeのRunner → TARGETS → Runner → Generalの場所で、Requires full　screenにチェックする。
これで、画面が固定されるようになります。
ただし、iPad特有の画面分割などには対応できなくなるようです。
今回は画面分割は必要ないので、こちらで問題ありませんでした。

最後に

画面固定に関してですが、実装はとても簡単でしたが、iPadにトラップがあるので注意が必要です。
結局、iPad側でもしっかりと表示するように対応するなら・・・と思ってiPad版を出すことにしました。

いろんなアプリを作ったり、アプリ開発の活動についてつぶやいていますので、気になって頂けたら、こちらもご覧ください。

HackerMemoを大幅にアップデートしたので、

海外向けのPVを作ってみました😆

夜なべして頑張って作ったので、拡散頂けたら泣いて喜びます😭🙏

音有りがオススメです！

元ネタわかる人いるかな〜🤔

アプリはこちら🔽
■iPhoneの方https://t.co/6T10L94Ld1

■Androidの方https://t.co/uBevCXrNw2 pic.twitter.com/wiGLv46kaG

— YuKiO｜アプリ個人開発｜Flutter × Firebase | スケルカメラリリースしました (@oo_forward) January 10, 2021