[Flutter] 全画面モードの自由自在に使えるようにする

Flutter

Last updated at 2023-12-08Posted at 2023-12-08

こんにちは。いせりゅーです。
今回は、全画面モードの自由自在に使えるようにするというタイトルで進めていきます〜

この記事は、株式会社ゆめみの23卒 Advent Calendar 2023のアドベントカレンダーになります！！
色々な種類の記事が投稿されるので、お楽しみに🤗

初めに

この記事はFlutter Kaigi 2023で登壇された「Flutterで構築する漫画ビューア」の中で学んだことを参考に作成させていただいています。
とても理解しやすくて本当に勉強になりました🙇

とてもわかりやすくまとめられているので、気になる方はこちらを閲覧していただけると幸いです。

全画面モードの有効にする

全画面の操作をするためにはSystemUiModeをうまく使いこなすことでやりたいことができます。

↑こちらから引用させていただいています。

SystemUiModeには、

leanBack
immersive
immersiveSticky
edgeToEdge
manual

の5つがあります。これらを簡単に整理するとこんな感じですかね？

名称	機能説明	Androidについての諸注意
leanBack	画面をタップするとオーバーレイが表示される	SDK 16 or Android J 以降
immersive	画面の端からスワイプジェスチャを行うと、オーバーレイが表示される	SDK 19 または Android K 以降
immersiveSticky	画面の端からスワイプジェスチャを行うと、オーバーレイが表示される	SDK 19 or Android K 以降
edgeToEdge	システムオーバーレイはアプリケーションの上に永続的に表示される	SDK 29 or Android 10 以降
manual	自由自在なモードの調整が可能	特になし

ではそれぞれを解説していこうと思います。

leanBack

ディスプレイ上の任意の場所をタップすると、ステータスバーとナビゲーションバーが表示される全画面表示される。
iOSでは問題ありませんが、Androidでは、SDK 16 または Android J 以降で利用可能となっているので注意が必要。
iOSの場合は、ステータスバーとホームインジケーターが非表示になり、同様の全画面になる。
画面をタップするとオーバーレイが表示される。

自分用のメモ

leanBackだけだとあまり効力がなさそうだったため、immersiveStickyなどを合わせて使った方が良さそう？

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setEnabledSystemUIMode(SystemUiMode.leanBack);
}

immersive

ディスプレイの端にあるスワイプジェスチャによってステータスバーとナビゲーションバーが表示される全画面表示される。
iOSでは問題ありませんが、Androidでは、SDK 19 または Android J 以降で利用可能となっているので注意が必要。
iOSの場合は、ステータスバーとホームインジケーターが非表示になり、同様の全画面になる。
画面の端からスワイプジェスチャを行うと、オーバーレイが表示される。
immersiveStickyと違い、ジェスチャはアプリケーションによって受信されない。

自分用のメモ

画面の端をスワイプすると、ステータスバーとホームインジケーターが出る

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersive);
}

immersiveSticky

ディスプレイの端にあるスワイプジェスチャによってステータスバーとナビゲーションバーが表示される全画面表示する
iOSでは問題ありませんが、Androidでは、SDK 19 または Android J 以降で利用可能となっているので注意が必要。
iOSの場合は、ステータスバーとホームインジケーターが非表示になり、同様の全画面になる。
画面の端からスワイプジェスチャを行うと、オーバーレイが表示される。
ジェスチャはアプリケーションによって受信できる。

自分用のメモ

ステータスバーとホームインジケーターが消える
下と上にスワイプすると一時的に表示される(これが一番良さそう)

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky);
}

edgeToEdge

ステータスおよびナビゲーション要素がアプリケーション上にレンダリングされ、全画面表示する。
iOSでは問題ありませんが、Androidでは、SDK 29 または Android 10以降で利用可能となっているので注意が必要。
iOSの場合は、ステータスバーとホームインジケーターが表示される。
システムオーバーレイはアプリケーションの上に永続的に表示されるため、このモードでは消えたり再表示されたりすることはない。

自分用のメモ

ステータスバーとホームインジケーターが表示し続ける

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
}

manual

manualを使う場合は、開発者は優先オーバーレイを設定する必要がある。
SystemUiOverlay.topを設定した場合
- ステータスバーがすべてのプラットフォームで表示されたままになる。
SystemUiOverlay.bottomを設定した場合
- ホームインジケーターがすべてのプラットフォームで表示されたままになる。
どちらも設定した場合は、leanBackと同じような状態になる。

自分用のメモ

ステータスバーかホームインジケーターのどちらかを非表示にしたい場合にとても有効的

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, 
   overlays: [
    // ステータスバーが消える
    SystemUiOverlay.bottom,
    // ホーム インジケーターが消える
    SystemUiOverlay.top,
  ]);
}

最後に

この辺りは、意外と知らないと使わないことがあると思うので、とても勉強になりました。また一つ成長できた気がして嬉しいです😚

ちょっとした宣伝

株式会社ゆめみの23卒のメンバーでアドベントカレンダーを作成しています。
新卒のフレッシュな記事がたくさん投稿予定なので、少しでも興味があれば購読いただけると幸いです！！

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up