SafeAreaで表示エリアを確保 -ひとりアドベントカレンダー Flutter編 2018 その3-

ノッチに邪魔されずコンテツを表示させるのは結構面倒だったりします。が、FlutterであればSafeAreaというWidgetが標準で用意されていますので、簡単に対応させることができます。
ということで、第3日目はSafeAreaを使ってみたいと思います。

昨日までの内容と今後については目次を参照してください。

iPhoneXで登場したノッチ（正式名はセンサーハウジング）、今年は全てのモデルに適用されましたね。Androidでもノッチ付きが増えてきており、新規にアプリを作る場合はノッチ対応が必須になってきています。

さて、FlutterではSafeAreaというWidgetが用意されていますので、簡単に対応させることができます。

いくつか引数が用意されていますが、普通は必須なchildだけを利用すれば良いでしょう。

今回のコードはこんな感じにしました。

 Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Material Icons Viewer"),
      ),
      body: SafeArea(
        child: GridView.builder(
          itemCount: icons.length,
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 4,
          ),
          itemBuilder: (context, index) {
            return Card(
              child: Icon(icons[index], size: 50),
            );
          },
        ),
      ),
    );
  }

SafeAreaを利用した場合と利用しなかった場合の比較画像を準備しました。
topやbottom、leftやrightを指定せずともデバイスの向きから適切な表示をしてくれてます。

画像内の上部分がSafeArea対応、下部分が非対応となります。分かりづらいですが、アイコンのズレやバックの影の有無（編集が面倒で端折っちゃいました）でわかるでしょうか。

ちなみに、このSafeAreaはノッチ自体を見てるわけではなく、ノッチ分をずらして表示させてるだけです。なので、例えば前回変更したCard部分に適用させるとこんな感じになってしまいます。

こんなことをする人はいないと思いますが、できるだけ外側でくるむのが良いでしょう。

今回はこれで終わりです。iPhoneX対応としては、ScaffoldのBodyはSafeAreaでくるんでおけば大抵の場合は良いと思います。
例外としてSliver関係を使いだした場合 があります。が、それは需要があればまた別の機会にでも。

Android？シミュレーターで動かした限りでは、ノッチの高さ（幅）分をバッサリと捨ててしまう感じです。SafeAreaを指定してもしなくても変わらない感じですかね。まあ種類が多いので個別対応は難しいのでしょうけど。

・・・

Twitterにもちょくちょく顔を出しています。フォローしていただけると内容にも気合が入ります。