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

この記事がおすすめな人

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

Padding (Flutter Widget of the Week)

Paddingを使えば、child Widgetの余白を指定できます。

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

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

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

Paddingの基本となるプロパティ
1. padding

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

child：余白を作りたいWidgetを指定
padding：child Widgetの余白を指定

padding

Card(
  color: Colors.yellow,
  child: Padding(
    padding: EdgeInsets.all(30),
    child: Text(
      'Hello World',
      style: TextStyle(
        fontSize: 30,
      ),
    ),
  ),
),

childプロパティで、余白を作りたいWidgetを指定します。

paddingプロパティで、childプロパティで指定したWidgetの余白を設定します。また、引数にEdgeInsetsを使用します。

>>【Flutter】paddingプロパティの使い方｜EdgeInsets