【Flutter】Spacer|Columnの余白のサイズをflexで調整する

今回はSpacer の基本的な使い方を紹介します。

Spacer を使えばColumnRow で要素と要素の間のスペースをflexで調整できます。

\ 世界最大級のオンライン学習サービス /

目次

Spacerの使い方

Column(
  children: [
    Container(
      height: 100,
      width: 100,
      color: Colors.red,
    ),
    Spacer(flex: 3),
    Container(
      height: 100,
      width: 100,
      color: Colors.blue,
    ),
    Spacer(),
    Container(
      height: 100,
      width: 100,
      color: Colors.yellow,
    ),
  ],
),

要素と要素の間の余白を調整したいところにSpacer を設置し、flex で余白の割合を調整します。

デフォルトではflex: 1 になっています。

一緒に読みたい

参考

  • URLをコピーしました!
目次