【Flutter】余白の付け方【padding,margin】

Widgetに余白をつけるには、一体どうしたら良いんだろう？

padding とか margin とか、違いがわからないわ！

本記事ではそんな疑問にお答えします。

FlutterでのWidgetの間の余白の付け方を解説します。
Containerのmargin,padding, Padding Widgetでの余白の付け方の違いから、
EdgeInsetsの種類まで詳細に解説します。

ぜひ読んでみてください！

余白の付け方
EdgeInsetsについて
まとめ
編集後記（2022/6/8）

余白の付け方

上の画像をご覧ください。

ピンクの大きな枠の中に水色の枠があり、その中に「text」という文字が表示されています。

ピンクの枠と水色の枠の間、水色の枠とTextの文字の間に余白が無い状態です。
これらに余白を付ける方法を3パターン紹介します。

Containerのmargin

１つ目の方法は、Containerのmargin(マージン)で余白を付ける方法です。
この方法では、以下の画像のようにmarginを設定したContainerの周りに余白が付きます。

コードは以下のようになります。

                Container(
                  height: 300,
                  width: 300,
                  color: Colors.red[200],
                  child: Stack(
                    children: [
                      Container(
                          margin: EdgeInsets.all(５０),
                          color: Colors.blue[200],
                          child: const Text(
                            'text',
                            style: TextStyle(fontSize: 30),
                          ),
                      ),
                    ],
                  ),
                ),

EdgeInsets.all(50)は長方形の各辺4方向に50の余白を与える、という意味となります。
詳細は後述します。

Containerのpadding

2つ目の方法は、Containerのpadding(パディング)で余白を設定する方法です。
この方法では、
以下の画像のようにpaddingを設定したContainerの内部に余白が設定されます。

コードはこちらです。

                Container(
                  height: 300,
                  width: 300,
                  color: Colors.red[200],
                  child: Stack(
                    children: [
                      Container(
                          padding: EdgeInsets.all(５０),
                          color: Colors.blue[200],
                          child: const Text(
                            'text',
                            style: TextStyle(fontSize: 30),
                          ),
                      ),
                    ],
                  ),
                ),

marginは外側に、paddingは内側に余白がつく、と覚えておきましょう！

Padding Widget のpadding

3つ目の方法は、余白を付けたいWidgetをPadding Widgetで囲い、
padding プロパティで余白を設定する方法です。

この方法では、以下の画像のようにPadding Widgetで囲んだContainerの周りに余白が付きます。

水色のContainerをPaddingで囲い、50のpaddingを設定した例

コードはこちらです。

                Container(
                  height: 300,
                  width: 300,
                  color: Colors.red[200],
                  child: Stack(
                    children: [
                      Padding(
                        padding: EdgeInsets.all(50),
                        child: Container(
                          color: Colors.blue[200],
                          child: const Text(
                            'text',
                            style: TextStyle(fontSize: 30),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),

「paddingなのに外側に余白がつくの？」と不思議に思うかもしれません。

確かにContainerからしたらmargin（外側の余白）がつくように見えますが、
外側のPadding Widgetからするとちゃんとpadding（内側の余白）がついています。

Containerの周りにPadding Widgetの薄い膜が張られ、
このPadding Widgetのpadding(内側)で余白が設定されるイメージです。

ちょっと複雑ですが、上記イメージで覚えておきましょう！

上の3つの方法を実際に数値を変更して検証できるDartPadを作成しました。

こちらでぜひ3つの方法をマスターしてみてください！

404 Page not found

EdgeInsetsについて

上ではContainerの長方形4辺全てに同じ値の余白を付ける方法を紹介しました。

では、左側だけ余白を付けたい、といった際はどうすればよいでしょうか？

この章ではEdgeInsetsのコンストラクタをそれぞれ紹介し、
4辺それぞれに異なる値を設定する方法等を解説します。

解説するコンストラクタは、以下となります。

EdgeInsets.all(double value)
EdgeInsets.fromLTRB(double left, double top, double right, double bottom)
EdgeInsets.only({double left = 0.0, double top = 0.0, double right = 0.0, double bottom = 0.0})
EdgeInsets.symmetric({double vertical = 0.0, double horizontal = 0.0})

EdgeInsets.fromWindowPadding は使用場所が限定的のため、割愛します。