flutter_native_splashを使うと、iOSのステータスバー(status bar)が表示されなくなる

結論：アプリ起動後にsetEnabledSystemUIModeメソッドを実行する

2022/9/22 　Flutter エラー・バグ日記　

　

開発中のiOSアプリで、時刻や電池残量が表示される画面上部のステータスバー（status bar）が、表示されないことに気づいた。

　

　

Androidでは問題なく表示されていたので、iOSで発生する問題らしい。

　

　

調べてみると、以下の記事が見つかった（大変助かりましたm(_ _)m）。

　

　

「flutter_native_splash」パッケージが原因とのこと。

　

確かに、Android12から、デフォルトでスプラッシュスクリーン（起動画面）が設定されるようになったため、Androidバージョンに応じて設定を切り替えられる「flutter_native_splash」パッケージを導入していた。

　

他で見つかった記事は、ほぼ全てAndroidのステータスバーが表示されない場合の対処法であり、iOSについて言及しているのは、この記事だけだった（英語で検索しても同様の記事は見つけられなかった）。

　

fullscreen: false にしても解決しない

「flutter_native_splash」パッケージ導入にあたり、「pubspec.yaml」には、以下のように記述していた。

　

dependencies:
# ・・・略・・・
  flutter_native_splash: ^2.2.9

dev_dependencies:
# ・・・略・・・
flutter_native_splash:
  color: '#FFFFFF'
  image: 'assets/images/icon_512.png'
  color_dark: '#262626'
  image_dark: 'assets/images/icon_512.png'
  fullscreen: true
  android_12:
    icon_background_color: '#FFFFFF'
    image: 'assets/images/icon_1152.png'
    icon_background_color_dark: '#262626'
    image_dark: 'assets/images/icon_1152.png'

　

こちらの情報などを拝見すると、「fullscreen:」（スプラッシュスクリーンをフルスクリーン表示するか否かを指定するプロパティ）を「true」にすると、ステータスバーが表示されなくなる、とのことだったので、「false」に修正してみたが、変化はなかった。

　

setEnabledSystemUIOverlaysメソッドを実行する（解決するが非推奨）

前述の参考記事で紹介されていたのが、アプリ起動直後に、下記メソッドを実行するというもの。

　

SystemChrome.setEnabledSystemUIOverlays(SystemUiOverlay.values);
// 「services.dart」をインポートする必要があるが、上記コードを書いて、
// エラーの赤い波線が出た所で、option＋Enter（Android Studioの場合）を押せば、簡単にインポートできる。

　

これで、ステータスバーを強制的に表示できるらしい。

　

早速、「main.dart」で最初に呼び出される「MyApp」クラスの「initState」内で、上記メソッドを実行したところ、iOSでもステータスバーが表示されるようになった。

　

しかし、既に「setEnabledSystemUIOverlays」メソッドは非推奨になっており（Flutter2.5以降）、使用は避けたほうが良い模様。。

　

setEnabledSystemUIModeメソッドを実行（引数は2通りあり）→解決

非推奨マークがついた状態の「setEnabledSystemUIOverlays」メソッドにカーソルを当てると、下記コメントが表示され、「setEnabledSystemUIMode」に変更せよ、とのこと。

　

「setEnabledSystemUIOverlays」は非推奨であり、使用しないでください。 「setEnabledSystemUIMode」に移行します。この機能は、v2.3.0-17.0.pre. 以降では廃止されました。

servicesパッケージのソースコード内の説明より（Google翻訳）

　

しかし、引数の指定方法が変わっており、単純に「setEnabledSystemUIOverlays」を「setEnabledSystemUIMode」に変えただけでは、エラーになってしまった。

　

「setEnabledSystemUIMode」のソースコードやFlutter公式の説明を見ると、「SystemUiMode」型の引数が必要らしい。

　

方法①：引数をedgeToEdgeにする

「SystemUiMode」型は、enumで、様々なモードに対応したプロパティがあるようだが、「SystemUiMode.edgeToEdge」が通常のモードであり、これを使えば、ステータスバーや、ナビゲーションバー（Androidの画面下部に表示される戻るボタンなどのゾーン）を固定表示できる模様。

　

Flutterの公式説明や、こちらの記事を参考にさせていただいた（ありがとうございますm(_ _)m）。

　

　

そこで、非推奨のメソッドを下記のように書き直したところ、iOSでも問題なくステータスバーを表示できた。

　

SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);

　

方法②：引数をmanualにする

後で気づいたが、非推奨マークがついた状態の「setEnabledSystemUIOverlays」メソッドのところで、option＋Enter（Android Studioの場合）を押すと、

　

Migrate to setEnabledSystemUIMode

　

が表示されるので、それを選択すると、自動的に下記コードへ修正してくれる。

　

SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: SystemUiOverlay.values);

　

この方法でもiOSで問題なくステータスバーが表示された。

　

非推奨のメソッドで設定していた「SystemUiOverlay.values」を引数に設定するには、「SystemUiMode.manual」を設定する必要があるらしい。

　

こちらの方が、対処としては簡単かもしれない。

　

---

（後日追記）

その後、解決したと思っていたら、実はノッチ（画面上部の切込み）があるiPhoneだと、依然ステータスバーが表示されないと気づいた。。。

　

この解決の過程は、下記日記に書いたので、よろしければご参考ください。

　

　

　

＼一般的なエラー対処法をまとめた記事はこちら／

　

リリースしたアプリ（全てFlutterで開発）

　

個人アプリ開発で役立ったもの

＼超初心者向けでオススメな元Udemyの講座／

　

　＼キャンペーン時を狙えば安価で網羅的な内容が学べる（日本語訳あり）／

　

＼Gitの基礎について無料で学べる／

　

＼実用的。image_pickerに関してかなり助けられた／

　

＼Dartの基礎文法を素早くインプットできる／

Dart入門 - Dartの要点をつかむためのクイックツアー