👣

paddingで余白を調整する

2022/05/26に公開

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ピクセルずつの余白を作る