Flutterラボ
【Flutter】SafeAreaの使い方(ステータスバーにウィジェットが重なるのを防ぐ方法)
#プログラミング#アプリ開発#Flutter#dart

ScaffoldにappBarが無い場合、bodyにウィジェットを表示しようとすると、ステータスバーに重なってしまいます。

return Scaffold(
  body: Container(
    width: 300,
    height: 100,
    color: Colors.red,
  )
);

SafeAreaウィジェットで囲うと、それを防ぐことができます。

return Scaffold(
  body: SafeArea(
    child: Container(
      width: 300,
      height: 100,
      color: Colors.red,
    ),
  )
);

SafeAreaは、どの方向に適用させられるかを決められます。
今回は、top方向のみ関係があるので、topプロパティをfalseに変更するとSafeArea適用外にさせることも可能です。

return Scaffold(
  body: SafeArea(
    top: false,
    child: Container(
      width: 300,
      height: 100,
      color: Colors.red,
    ),
  )
);
Flutterラボ|動画で学ぶFlutter学習サイト Flutter・Dart・Firebaseに関するアプリ制作の技術を学ぶことができます。プログラミング初心者から経験者まで flutterlabo.tech