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

![スクリーンショット 2023-12-06 11.01.23（2）.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672609/4aa80cef-f9c1-7b02-5ff1-d9afd80031ac.png)


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

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

https://qiita.com/advent-calendar/2023/yumemi-23-graduation


# 初めに

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

https://www.youtube.com/watch?v=vCoG6BTNpAA

https://fortee.jp/flutterkaigi-2023/proposal/076d093c-a1ff-4fe3-be58-8f8536c97de3

https://tech.excite.co.jp/entry/2023/11/13/140000

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


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

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

https://api.flutter.dev/flutter/services/SystemUiMode.html

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


`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などを合わせて使った方が良さそう？

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

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

#### 自分用のメモ
- 画面の端をスワイプすると、ステータス バーとホーム インジケーターが出る

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

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

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

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

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

#### 自分用のメモ
- ステータスバーとホーム インジケーターが表示し続ける

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

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

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

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


# 最後に

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

# ちょっとした宣伝

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


https://qiita.com/advent-calendar/2023/yumemi-23-graduation



<img width="1240" height="112" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672609/6d8a7098-9aef-a19a-54fe-83a2d493e033.png" alt="YUMEMI New Grad Advent Calendar 2023">