広告

Flutterラボの

プレミアム会員になる

【Flutter】SafeAreaの使い方(ステータスバーにウィジェットが重なるのを防ぐ方法)

2021.11.19

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


Flutterラボ
hatchoutschool
FlutterとNuxtに関する知識を発信しています! 動画で学べる学習サイト『Flutterラボ』と『Nuxtラボ』を運営 Flutterラボ:https://flutterlabo.tech/ 広告のECサイトを開発(https://ec-ad.tech/)