Open2

Wrapとは？

Flutter
muranakarmuranakar

Wrapという言葉の基本的な意味を説明します：

英語の「Wrap」の主な意味：

  1. 包む、巻く、包装する

    • 例：プレゼントを包む（wrap a present）
    • 例：スカーフを首に巻く（wrap a scarf around your neck）

  2. 包み込む、覆う

    • 例：毛布で体を包む（wrap yourself in a blanket）

  3. 収める、終える

    • 例：撮影を終える（wrap up the shooting）
    • 例：会議を終える（wrap up the meeting）

この「包む」「囲む」という基本的な意味から、プログラミングやUIの文脈では：

  • コンテンツを自動的に折り返す
  • 要素を包み込んで管理する
  • コンテンツを適切に収める

という意味で使われるようになりました。

Wrapウィジェットは「子要素を包み込んで、必要に応じて折り返す」という動作から来ていると考えられる。

muranakarmuranakar

Wrapは以下のような特徴があります：

  1. 子ウィジェットを複数行に自動的に配置します
  2. 画面幅を超えた場合、自動的に次の行に折り返します
  3. タグやチップなどの要素を横並びに配置する際によく使用されます
import 'package:flutter/material.dart';

class WrapDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Wrapデモ'),
      ),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Wrap(
          spacing: 8.0, // 水平方向の間隔
          runSpacing: 8.0, // 垂直方向の間隔
          children: [
            Chip(label: Text('Flutter')),
            Chip(label: Text('Android')),
            Chip(label: Text('iOS')),
            Chip(label: Text('Web')),
            Chip(label: Text('Desktop')),
            Chip(label: Text('Database')),
            Chip(label: Text('Cloud')),
            Chip(label: Text('API')),
          ],
        ),
      ),
    );
  }
}

主な用途：

  • タグやラベルの表示
  • フィルターチップの実装
  • 画像ギャラリーの作成
  • 柔軟なレイアウトが必要な場面

Rowとの違い：

  • Rowは一行に固定されますが、Wrapは自動的に折り返します
  • Rowは画面幅を超えるとオーバーフローエラーが発生しますが、Wrapは自動的に調整されます

上記のコード例では、複数のChipウィジェットをWrapで包むことで、画面幅に応じて自動的に折り返される柔軟なレイアウトを実現しています。

実装時のポイント：

  • spacing: 水平方向の間隔を設定
  • runSpacing: 垂直方向の間隔を設定
  • alignment: 要素の配置方法を指定可能
  • direction: 配置の方向（横方向・縦方向）を指定可能