【Flutter】MainAxisSizeでColumnの余白を最小にする

今回はColumnRow のメイン軸の余白を最大・最小にする方法を紹介します。

ColumnRow のメイン軸(main axis)の余白を調整するにはMainAxisSize を使用します。

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

目次

デフォルト

Container(
  color: Colors.grey.withOpacity(0.2),
  child: Column(
    mainAxisSize: MainAxisSize.max,
    mainAxisAlignment: MainAxisAlignment.start,
    children: [
      Container(
        height: 100,
        width: 100,
        color: Colors.red,
      ),
      Container(
        height: 100,
        width: 100,
        color: Colors.blue,
      ),
      Container(
        height: 100,
        width: 100,
        color: Colors.yellow,
      ),
    ],
  ),
),
Container(
  color: Colors.grey.withOpacity(0.2),
  child: Column(
    mainAxisSize: MainAxisSize.max,
    mainAxisAlignment: MainAxisAlignment.spaceAround,
    children: [
      Container(
        height: 100,
        width: 100,
        color: Colors.red,
      ),
      Container(
        height: 100,
        width: 100,
        color: Colors.blue,
      ),
      Container(
        height: 100,
        width: 100,
        color: Colors.yellow,
      ),
    ],
  ),
),

Column またはRow のデフォルトではmainAxisSizeの値がMainAxisSize.max になっており、メイン軸の余白は親Widgetが許す範囲まで最大限広がります。

イメージ画像のグレーの部分が余白です。

メイン軸の余白を最小限にする

Container(
  color: Colors.grey.withOpacity(0.2),
  child: Column(
    mainAxisSize: MainAxisSize.min,
    mainAxisAlignment: MainAxisAlignment.spaceAround,
    children: [
      Container(
        height: 100,
        width: 100,
        color: Colors.red,
      ),
      Container(
        height: 100,
        width: 100,
        color: Colors.blue,
      ),
      Container(
        height: 100,
        width: 100,
        color: Colors.yellow,
      ),
    ],
  ),
),

mainAxisSizeの引数にMainAxisSize.min を渡すことでColumnRowの余白を最小にできます。

mainAxisAlignment の引数がMainAxisAlignment.spaceAroundMainAxisAlignment.spaceEvenly で外側に余白がある場合でも余白は最小になります。

一緒に読みたい

参考

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