見出し画像

[Flutter]SafeAreaとScaffoldの順番

業務でFlutterアプリを作成しています。
業務で触っていく中で見つけた発見や失敗をメモ代わりに書いていこうと思います。

今回はSafeAreaとScaffoldの順番を間違えていた話です。

最近の端末ではノッチのあるものが多いですね。表示部分が隠れないようにFlutterでもSafeAreaWidgetが準備されていて囲んだWidgetを端末ごとに異なるSafeAreaにおさめてくれます。
また、ScaffoldはFlutterのページを作成する基本です。AppBarやBottomNavigationをいい感じに配置してくれます。

モバイルの知識も乏しい中、Flutterのプロジェクトに途中から飛び込んでソースを見ながら勉強していました。そこで大きな勘違いをします。

AppBarもSafeAreaに入れなきゃならないのでは?

つまり、ScaffoldもSafeAreaで囲む必要があると考え以下のように実装しました。

 Widget build(BuildContext context) {
   return SafeArea(       // <- Scaffold を囲んでる
     child: Scaffold(
       appBar: AppBar(
         title: Text('title'),
       ),
       body: Center(child: Text('body')),
     ),
   );

簡単なページです。
iPhoneシミュレータを使いライトモードで実行するとこうなります。

スクリーンショット 2020-05-06 20.29.20

おわかりいただけただろうか…。
上下に黒い帯が表示されているのだ…。
特に上のstatus barを見ると、ライトモードのため文字色が黒で下に黒い帯が入ってしまい何が書いてあるかわかりません。電池の残量さえもわからないなんて…。

何がどうしてこうなっているのかわからなかったのですが、試行錯誤をしてこの黒いstatus barに色をつけたり文字色を変更したりで状況を脱することができました。その方法は別にまとめようと思います。
(そもそもこんな状況に陥る人少ないだろうけども…)

さて、一番の簡単な解決方法です。公式サイトでSafeAreaのページにある動画を見ると、「ScaffoldのbodyをSafeAreaで囲んでください」と言っています。

ナンダッテー∑(°口°๑)

(SafeAreaが犯人って思ってなかったし、動画見てなかった…。もっとわかり易い場所にゴニョゴニョ)と思いましたが、気を取り直して正しい順番に書き直して実行してみます。

  Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       title: Text('title'),
     ),
     body: SafeArea(      // <- body を囲む
       child: Center(child: Text('body')),
     ),
   );

スクリーンショット 2020-05-06 20.43.14

無事に黒い帯がなくなりました。

ScaffoldのbodyをSafeAreaで囲むのが正しい使い方です。
BottomNavigationを入れるとわかりやすいのですが、AppBarだったりBottomNavigationの部分をしっかりSafeAreaにおさめるようになっているのように見えます。そのため、ScaffoldをSafeAreaで囲む必要がないのですね。さすがFlutter!!それに気が付かなかったのが敗因でした。

今回は以上です。
読んでいただきありがとうございました。

この記事が気に入ったらサポートをしてみませんか?