【Flutter】Wrapの使い方


今回は**Wrap**の使い方について解説していきます。
## 対象読者
○Flutter初学者
○Wrapの基本的な使い方を学びたい人

上記の方におすすめです。
では、解説していきます。

## 公式
**公式ドキュメント**

https://api.flutter.dev/flutter/widgets/Wrap-class.html

**公式Youtube**

https://youtu.be/z5iw2SeFx2M

## Wrapとは

Wrapとは、ColumnやRowのように指定した子要素を並べてくれるのに加え、画面幅を超えた時はうまく折り返してくれるウィジットです。

例えば下記のようにRow指定して子要素をいくつか指定してみると、

```main.dart
Center(
        child: Row(
          children: const [
            Chip(
              avatar: CircleAvatar(
                backgroundColor: Colors.blue,
                child: Text('A'),
              ),
              label: Text('Wrapテスト'),
            ),
            Chip(
              avatar: CircleAvatar(
                backgroundColor: Colors.blue,
                child: Text('B'),
              ),
              label: Text('Wrapテスト'),
            ),
            Chip(
              avatar: CircleAvatar(
                backgroundColor: Colors.blue,
                child: Text('C'),
              ),
              label: Text('Wrapテスト'),
            ),
            Chip(
              avatar: CircleAvatar(
                backgroundColor: Colors.blue,
                child: Text('D'),
              ),
              label: Text('Wrapテスト'),
            ),
          ],
        ),
      ),
```

<img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2466417/e29466ef-d705-e8b8-7111-d179db7a04ec.png' width='300'>

写真のように画面幅を超えて`overflowed`エラーが発生してしまいます。
そこで先ほどRowを指定していた部分を**Wrap**に変更してみると、

```main.dart
Center(
        child: Wrap( // RowからWrapに変更
          children: const [
            Chip(
              avatar: CircleAvatar(
                backgroundColor: Colors.blue,
                child: Text('A'),
              ),
              label: Text('Wrapテスト'),
            ),
            Chip(
              avatar: CircleAvatar(
                backgroundColor: Colors.blue,
                child: Text('B'),
              ),
              label: Text('Wrapテスト'),
            ),
            Chip(
              avatar: CircleAvatar(
                backgroundColor: Colors.blue,
                child: Text('C'),
              ),
              label: Text('Wrapテスト'),
            ),
            Chip(
              avatar: CircleAvatar(
                backgroundColor: Colors.blue,
                child: Text('D'),
              ),
              label: Text('Wrapテスト'),
            ),
          ],
        ),
      ),
```

<img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2466417/52692da9-747f-a801-0235-f5c00b045fcd.png' width='300'>

こんな感じで画面幅を超えてしまう子要素をうまく折り返してくれます。
Columnと同じように縦に子要素を並べたい時は`derection: Axis.vertical`を指定します。

```
        child: Wrap(
          direction: Axis.vertical,
```

<img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2466417/81c2ca29-40c0-6337-39c3-fb8b13e6302e.png' width='300'>

##その他のプロパティ（一部）
### ○alignment

子要素の配置を変更することができます。

```dart
        child: Wrap(
          alignment: WrapAlignment.center,
```

<img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2466417/5dca228b-3d55-1f28-362c-d16cee330b7b.png' width='300'>

### ○runSpacing

折り返した行（列）間の幅を指定します。

```dart
        child: Wrap(
          runSpacing: 100.0,
```

<img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2466417/52823ba6-c5cb-ca51-0f8f-228b5282a57a.png' width='300'>

### ○spacing

子要素間の幅を指定します。

```
       child: Wrap(
          spacing: 100,
```

<img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2466417/186462f7-c377-665a-fd55-e969e6f4576b.png' width='300'>

## 感想
Wrap = 「折り返してくれるウィジット」から「子要素のレイアウトを割と自由に動かすことができるウィジット」という認識に変わりました。やはり普段何気なく使用しているウィジットのドキュメントを見てみるのも大事ですね。