LoginSignup
11
3

More than 1 year has passed since last update.

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

Posted at

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

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

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

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

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

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特有の画面分割などには対応できなくなるようです。
今回は画面分割は必要ないので、こちらで問題ありませんでした。

スクリーンショット 2021-12-28 17.14.28.png

最後に

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

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

11
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11
3