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

※当サイトは、アフィリエイト広告を利用しています

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

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

 

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

 

 

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

 

本記事はライトな日記思考で書いているので、詳細説明はしておらず、基本、テキストのみで画像とかはあまり載せておりません。。m(_ _)m

解説記事ではないため、解決していない内容や、その時々の間違った解釈を述べてしまっている可能性が大いにありますので、何卒、ご了承ください。

 

調べてみると、以下の記事が見つかった(大変助かりました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の要点をつかむためのクイックツアー

タイトルとURLをコピーしました