【Flutter】Wrap|Columnのはみ出たコンテンツを折り返す

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

Wrapを使えばColumnRowで余白が足りなくなった場合に折り返し、複数の列を使用してWidgetを配置できます。

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

目次

Wrapの使い方

Wrap(
  children: List.generate(20, (index) {
    return SizedBox(
      width: 80,
      height: 50,
      child: Card(
        color: Colors.blue,
        child: Text(
          index.toString(),
          style: TextStyle(
            color: Colors.white,
            fontSize: 20,
          ),
        ),
      ),
    );
  }),
),

下画像のようにRowでは余白が足りなくなるとWidgetが全て表示されないのに対し、Wrapでは余白が足りなくなると折り返し表示できます。

Wrapの場合

Rowの場合

Columnを折り返す

body: Wrap(
  direction: Axis.vertical,
  children: List.generate(20, (index) {
    return SizedBox(
      width: 80,
      height: 50,
      child: Card(
        color: Colors.blue,
        child: Text(
          index.toString(),
          style: TextStyle(
            color: Colors.white,
            fontSize: 20,
          ),
        ),
      ),
    );
  }),
),

デフォルトではdirectionの引数がAxis.horizontalになっており、水平方向に要素が配置されます。よってColumnを折り返したい場合はAxis.verticalを渡します。

Wrapの場合

Columnの場合

ピクセル値で要素同士の余白を指定

Wrap(
  spacing: 20,
  runSpacing: 40,
  children: List.generate(20, (index) {
    return SizedBox(
      width: 80,
      height: 50,
      child: Card(
        color: Colors.blue,
        child: Text(
          index.toString(),
          style: TextStyle(
            color: Colors.white,
            fontSize: 20,
          ),
        ),
      ),
    );
  }),
),

spacingでメイン軸の余白、runSpacingでクロス軸の余白をピクセル値で指定できます。

WrapAlignmentで要素同士の余白を指定

body: Container(
  width: double.infinity,
  height: double.infinity,
  child: Wrap(
    alignment: WrapAlignment.spaceAround,
    runAlignment: WrapAlignment.spaceEvenly,
    children: List.generate(20, (index) {
      return SizedBox(
        width: 80,
        height: 50,
        child: Card(
          color: Colors.blue,
          child: Text(
            index.toString(),
            style: TextStyle(
              color: Colors.white,
              fontSize: 20,
            ),
          ),
        ),
      );
    }),
  ),
),

alignmentでメイン軸の配置方法、runAlignmentでクロス軸の配置方法を指定できます。

引数にはWrapAlignmentを渡します。MainAxisAlignmentと同様に使用できます。

一緒に読みたい

参考

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