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

SafeArea使い方
この記事がおすすめな人
  • Flutterアプリ開発初心者
  • 英語のFlutterドキュメントを読むのが難しい
  • SafeArea Widgetの基本的な使い方が知りたい
SafeArea (Flutter Widget of the Week)

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

\ 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,
              ),
            ],
          ),
        ),
      ),
    );
  }
}
SafeArea あり
SafeArea なし
タイトルとURLをコピーしました