技術記事

micomia株式会社の井上です。

今日はON/OFFの判別が難しいSafe Areaについて解説していこうと思います。

1. Safe Areaとは

スマホには、ノッチ（画面上の黒い部分）やステータスバー（時間や電池残量のところ）など、画面の一部が使えない場所があります。

Safe Areaを使うと、こういった部分と重ならないように、画面の表示位置を自動で調整してくれます。

2. Safe Areaを使わなかったらどうなるのか？

Safe AreaをOFFにした時にどうなるのかを見てみましょう。

こちらはiPhone 14Proのサイズですが、画面上部のノッチと被ってしまっています。この画面はマイページに当たりますが、この状態だとアイコンが見えにくいですよね。

また、今回はflutterflowのデフォルトのNavBarを使用していますが、オリジナルのNavBarを使用すると、

NavBarの下に謎の空白ができています。

これを解決できるのが今回のSafe Areaです。

3. どんな時にONにしてどんな時にOFFにするのか

結論から言うと、私としては特別な仕様でない限りSafe AreaはONで良いという考えです。Safe AreaをONにすることでノッチやホームバーにUIが隠れない、様々な画面比率の端末に対して適切に表示できるようになります。

「特別な仕様」と言うのは動画や地図など画面いっぱいに背景や画像を広げたい時です。逆に、SafeAreaをOFFにするのは、スプラッシュ画面やランディングページ（背景を端まで見せたい）、地図や動画など没入感を出したいコンテンツのような場合です。このような場合にSafe AreaをOFFにすることで余白のないデザインになります。

4. 最後に実機での見え方を確認すると安心

FlutterFlowにはエディタ上でSafe Areaを非表示にする機能があります。非表示にすることで、実際の画面が端までどう表示されるかを確認することができます。

デフォルトでONになっているShow Safe AreaをOFFにすることができます。

先ほどの画像と比べると上下の余白がなくなっていることがわかります。非表示にした状態でボタン等が隠れていたりしないようであれば、安全に実装できていると判断して良いです。逆に、NavBarの下に不必要な余白があるなどの違和感がある場合はSafe AreaをONにして調整することでミスなく実装できます。

5. まとめ

Safe AreaのON/OFFの判断としては、基本的にはON、画面全体（端まで）表示させたい場合はOFF、エディタ上でSafe Areaを非表示にしてみてUIの問題がなければOK、この3つを基準に判断すると良いです。Safe AreaのON/OFFに関しては少しややこしい部分でもあるので、実機での見え方もしっかり確認しながら実装していきましょう。