【Flutter】SafeAreaの基本的な使い方

「SafeArea Widget」を使えば、child Widgetをスクリーンの領域内に納めることができます。

SafeAreaの基本となるプロパティ

• child：スクリーンの範囲内に納めたいWidgetを指定します。

child

SafeArea(
  child: Widget, //Widgetのところに範囲内に納めたいWidgetを代入します。
),

childプロパティでスクリーンの範囲内に納めたいWidgetを指定します。

// 右の画像のコード
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter入門アカデミー'),
        ),
        body: SafeArea(
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              Container(
                width: 100,
                height: 100,
                color: Colors.yellow,
              ),
              Container(
                width: 100,
                height: 100,
                color: Colors.red,
              ),
              Container(
                width: 100,
                height: 100,
                color: Colors.green,
              ),
              Container(
                width: 100,
                height: 100,
                color: Colors.blue,
              ),
            ],
          ),
        ),
      ),
    );
  }
}