[Flutter] Paddingで余白を調整する

4158 ワード
テキストリンク

paddingは余白を作ったり、その余白の幅などを調整する場合に用いるwidgetです。
その場合にともに用いられる事が多いのが、EdgeInsetsです。
この２つを用いれば基本的な余白は簡単に作成することができます。

Padding(
    padding: EdgeInsets.all(15),
    child: Text('Hello!!'),
);

上記のように使用すると、TextのHello!の周りの四方に15ピクセルずつ余白が作成されます。
()内の数値が大きくなるほど余白が大きくなります。

均等に作成するだけではなく、それぞれの余白の大きさを指定することも可能です。
EdgeInsets.の後ろを変更するだけです。

Padding(
    padding: EdgeInsets.only(top: 10, right: 20, bottom: 30, left: 40),
    child: Text('Hello!!'),
);

上のコードが示すのは、上に10, 右に20， 下に30，左に40，となります。
top: 上方向
right: 右方向
bottom: 下方向
left: 左方向
これらが、それぞれが示す方向です。

Padding(
    padding: EdgeInsets.symmetry(horizontal:10, vertical: 40),
    child: Text('Hello!!'),
);

このようにすると上下と左右をセットで余白を指定できます。
horizontal: 左右に10ピクセルずつの余白を作る
vertical: 上下に40ピクセルずつの余白を作る

参考リンク

https://nzigen.com/reference/flutter/2018-04-15-padding/
Ubuntu風壁紙をつくる方法
Audiomasterロードマップ ~収録編~