【Flutter】SafeArea|ステータスバーや画面の角に重なる邪魔なWidgetを対処

今回はSafeArea の基本的な使い方を紹介します。

SafeArea を使えばステータスバーやスクリーン画面の角に重なってしまうWidgetが重ならないよう防ぐことができます。

\ 世界最大級のオンライン学習サービス /

目次

SafeAreaの使い方

SafeArea(
  child: Column(
    children: [
      Text(
        'Hello World',
        style: TextStyle(
          fontSize: 40,
        ),
      ),
      Expanded(
        child: Container(
          color: Colors.blue,
        ),
      ),
    ],
  ),
),

ステータスバーやスクリーン画面の角など操作の邪魔になる可能性があるWidgetをSafeArea でラップします。

SafeAreaあり

SafeAreaなし

指定したサイドのSafeAreaを無効にする

SafeArea(
  bottom: false,
  child: Column(
    children: [
      Text(
        'Hello World',
        style: TextStyle(
          fontSize: 40,
        ),
      ),
      Expanded(
        child: Container(
          color: Colors.blue,
        ),
      ),
    ],
  ),
),

指定したサイドでSafeAreaを無効化できます。

上記コードではbottom: false で下側だけ無効化しています。

一緒に読みたい

参考

  • URLをコピーしました!
目次