今回は「SafeArea」の基本的な使い方について紹介します。
SafeAreaを使えばスマホなどのステータスバーや画面下のバーに重なってしまうWidgetを邪魔にならない領域に収めることができます!
目次
SafeAreaの基本プロパティ
- child
- left, top, right, bottom
SafeAreaなし

SafeAreaなしの場合、上画像のようにText(Hello World)とステータスバーが重なってしまいます。
//ソース
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.teal,
body: Container(
color: Colors.white,
child: Text("Hello World"),
),
),
);
}
SafeAreaあり

SafeAreaありの場合、ステータスバーなどに重ならないよう指定したWidgetを邪魔にならない領域に表示できます。
//ソース
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.teal,
body: SafeArea(
child: Container(
color: Colors.white,
child: Text("Hello World"),
),
),
),
);
}
left, top, right, bottom

画面側面を指定してSafeAreaを無効化できます。今回は「top: false」で上部のSafeAreaを無効化させています。
//上部のSafeAreaを無効化
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.teal,
body: SafeArea(
top: false,
child: Container(
color: Colors.white,
child: Text("Hello World"),
),
),
),
);
}
以上です。