リファレンス

パディング(余白)を調整する

URLをコピーする Twitterでシェアする Facebookでシェアする

PaddingEdgeInsets を組み合わせることで、Widget の内側に余白を持たせることができます。

Paddingとは

Padding は余白を作るための Widget です。

Padding(
   padding: EdgeInsets.all(30),
   child: Container(color: Colors.red),
)

のように書きます。

引数 child には、余白の中の要素を、padding には、持たせたい余白の大きさを指定します。

上の例の、EdgeInsets.all(20) は四方すべてに 20 ピクセルずつ均等に余白を持たせます。

padding値の指定方法

EdgeInsets.all(30) の他にも、

EdgeInsets.only(top: 30)

とすることで、上方向にのみ余白をもたせることもできます。

また、

EdgeInsets.only(top: 10, right: 20, bottom: 30, left: 40)

のように、四方のパディングの大きさを自由に設定することができます。

さらに、EdgeInsets.symmetryを用いれば、上下または左右の余白を簡潔に記述できます。

EdgeInsets.symmetry(horizontal:10, vertical: 40);

Container.padding と Padding の使い分け

Container.padding 引数と Padding の 2 つの間には特に違いはありませんが、padding だけのために Container を使うと分かりにくいので、できるだけ Padding を使いましょう。

children: <Widget>[
  // 同じ結果に
  Container( // paddingだけを入れたい場合、Containerは非推奨
    padding: EdgeInsets.all(20),
    child: Container(color: Colors.red),
  ),
  Padding( // 推奨
    padding: EdgeInsets.all(20),
    child: Container(color: Colors.red),
  ),
],

参考リンク