Padding
と EdgeInsets
を組み合わせることで、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),
),
],
