Zenn
Open3

Wrapとは？

muranakarmuranakar

1. Wrapウィジェットとは

Wrapウィジェットは、子ウィジェットを水平方向または垂直方向に複数行で配置できる便利なレイアウトウィジェットです。

主な特徴:

  • 子ウィジェットが画面幅を超えた場合、自動的に次の行に折り返します
  • 行間や要素間のスペースを細かく制御できます
  • 要素の配置方法を柔軟にカスタマイズできます

2. 基本的な実装例

まずは簡単な実装例を見てみましょう：

Wrap(
  spacing: 8.0,     // 要素間の水平スペース
  runSpacing: 4.0,  // 行間の垂直スペース
  children: <Widget>[
    Chip(
      avatar: CircleAvatar(
        backgroundColor: Colors.blue.shade900,
        child: const Text('AH'),
      ),
      label: const Text('Hamilton'),
    ),
    Chip(
      avatar: CircleAvatar(
        backgroundColor: Colors.blue.shade900,
        child: const Text('ML'),
      ),
      label: const Text('Lafayette'),
    ),
    // 他のChipウィジェット...
  ],
)

3. 重要なプロパティの解説

direction

  • Axis.horizontal（デフォルト）: 水平方向に配置
  • Axis.vertical: 垂直方向に配置
Wrap(
  direction: Axis.vertical,
  children: [...],
)

alignment

要素の配置方法を指定します：

  • WrapAlignment.start（デフォルト）
  • WrapAlignment.center
  • WrapAlignment.end
  • WrapAlignment.spaceBetween
  • WrapAlignment.spaceAround
  • WrapAlignment.spaceEvenly

spacing & runSpacing

Wrap(
  spacing: 10.0,    // 要素間の間隔
  runSpacing: 20.0, // 行または列の間隔
  children: [...],
)

4. ユースケース

Wrapウィジェットが特に有用な場面：

  1. タグやチップの表示
  2. フィルターオプションの表示
  3. 動的なコンテンツの配置
  4. レスポンシブなレイアウトの作成