2019年9月8日日曜日

Flutter - SafeArea

これからのモバイル開発はFlutter一本でよいと思います。
ということで、今後はFlutterメインで。

Widget of the weekly ① SafeArea

https://www.youtube.com/watch?v=lkF0TQJO0bA&list=PLjxrf2q8roU23XGwz3Km7sQZFTdB996iG&index=2

Status bar領域やデバイスのコーナーなども考慮してアプリが安全に描画できる領域を自動的にpaddingしてくれるのがSafeArea。
AppBarを使用せず、paddingも入れずにレイアウトを組むと以下のようになってしまう。

タブがSBarの背面に潜り込んでいる。

SafeAreaを使ってみる(topのみpadding true)
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        top: true,
        bottom: false,
        left: false,
        right: false,
        child: _createBody(context),
      ),
      backgroundColor: Colors.yellow,
    );
  }

MediaQuery.of(context).paddingを取得してContainerにpaddingを取得するのと同じ事だが、若干便利。Statelessなので積極的に使ってよい。