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

この記事がおすすめな人

Flutterアプリ開発初心者
英語のFlutterドキュメントを読むのが難しい
SafeArea Widgetの基本的な使い方が知りたい

SafeArea (Flutter Widget of the Week)

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

\ Widgetの扱い方が不安な方はこちら！ /

【Flutter】Widget・Widgetツリーの基本的な仕組み｜ FlutterアプリのUI構造

Flutterアプリでアプリ開発する上で始めに理解しておきたい「Widget」について紹介します。Widgetとは、FlutterのUIを構築しているパーツのことを呼び、FlutterアプリはこのWidgetがツリー状(Widget)に組み合わさって構築されています。また、Widgetはクラスをインスタンス化したオブジェクトでもあります。

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

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,
              ),
            ],
          ),
        ),
      ),
    );
  }
}