【Flutter】おもしろwidget：ListWheelScrollViewをざっくりまとめ

# はじめに
FlutterのListWheelScrollViewがとてもおもしろかったので、
勉強したことを備忘録としてまとめます。
理解した範囲を理解したなりにまとめているだけなので、
ListWheelScrollViewの全てを網羅しているわけではないです。

# ListWheelScrollViewとは
スロットマシーンみたいなListViewを簡単に作れるwidget。
要するに単なる「スクロールできるListView」なんだけど、それだけじゃない。

プロパティを良い感じにいじくるだけで、こんなやつとか
![ListWheelScrollView (3).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/515993/8aad3878-bb95-345f-a086-fb7c48a4d9da.gif)
こんなやつとか
![ListWheelScrollView (10).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/515993/e588af5b-cbf6-cbcd-4bcf-06bc6776faf1.gif)

こんなやつとか
![ListWheelScrollView (2).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/515993/f2bda55d-77cb-24b6-8167-741e3b27c2d3.gif)

面白げなものがけっこう簡単に作れてしまうのだ。

こんなもんが標準でしれっと用意されてるんだから、Flutterはおもしろい。

# 基本的な使い方

```dart
ListWheelScrollView(
  itemExtent: 30,
  children: [
for (var i in List.generate(10, (i) => i))
  Container(
      width: 200,
      color: Colors.cyanAccent,
      child: Center(child: Text((i + 1).toString() + " 番目")))
]),
```

これだけでもう結構それっぽいのが作れちゃいます。
![ListWheelScrollView (1).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/515993/3aed981a-b60f-739d-20f1-2e7a203be9f2.gif)



# プロパティについて
基本的には公式のリファレンスに全部載ってます。
https://api.flutter.dev/flutter/widgets/ListWheelScrollView-class.html

が、英語かつ専門的な説明が多すぎて意味が分からなかったので、
一個一個いじくってみて面白いのを探した。

特に面白かったやつをまとめていきます。

## 必須プロパティ（無いとエラーになる）
- itemExtent
- Children

### itemExtent
必須。
リスト内の各アイテムの大きさ（height）を、正のDouble値で指定します。
この値を大きくすると、アイテム一個一個の縦幅がでかくなる。

### Children
必須。
リストアイテムの内容をここで設定する。
多分、普通のListViewと同じ。
1～10の数字だけとか、単純なものなら例のようにList.generateの単純ループでOK。


## 任意のプロパティ
面白かったやつだけ抜粋。
- diameterRatio
- offAxisFraction
- perspective
- controller

### diameterRatio
公式：https://api.flutter.dev/flutter/widgets/ListWheelScrollView/diameterRatio.html
デフォルト値：2

これを1に設定すると
![ListWheelScrollView (4).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/515993/2e33ea72-77fe-8050-9449-160b26456caa.gif)
3に設定すると
![ListWheelScrollView (5).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/515993/178127d2-473c-a6dd-b36c-bb4101c0494e.gif)

子アイテムの余白と、上下の丸まり具合に影響するっぽい？
公式を読んでも設定の意味は分からんが、とにかくすごい変わる。


### offAxisFraction
公式：https://api.flutter.dev/flutter/widgets/ListWheelScrollView/offAxisFraction.html
デフォルト値：0.0

5.0に設定すると
![ListWheelScrollView (6).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/515993/4f916181-f603-d4f4-253f-cc7ae2e379c7.gif)

-5.0に設定すると
![ListWheelScrollView (7).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/515993/e41f76c6-7a90-e464-b814-1ae8859634ef.gif)

見ての通り、横方向にぐにゃーってなる設定です。
おもしろい。

### perspective:
公式：https://api.flutter.dev/flutter/widgets/ListWheelScrollView/perspective.html
デフォルト値：0.003

0.0001に設定すると
![ListWheelScrollView (8).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/515993/6014e50b-dda6-ecec-d776-f8a3ed58e318.gif)


0.01に設定すると
![ListWheelScrollView (9).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/515993/454a7eff-0346-1c40-1b57-77c387a375fa.gif)

上下の丸まり具合に影響する設定です。
設定がシビアで、適当に0.1とか設定したらすぐエラーになる。

### controller
公式：https://api.flutter.dev/flutter/widgets/ListWheelScrollView/controller.html
スクロールの状態を制御するFixedExtentScrollControllerを指定できる。
これを設定すると、外からスクロールを動かしたり現在選択されているアイテムを取得したりできる。
例えばスロットマシーンを作るとした場合、
レバーのボタンのタップイベントで勝手にスクロールさせるとか。

説明が長くなるので、これについては別記事にします。


# イベント
### onSelectedItemChanged
公式：https://api.flutter.dev/flutter/widgets/ListWheelScrollView/onSelectedItemChanged.html
選択されているアイテムが変化した時に走るイベント。
スクロール後に選択されたアイテムのインデックスを引数で取得できる。


```dart
onSelectedItemChanged: (index) {
    print(index.toString() + "が選択されました");
},
```

# さいごに
もっと面白いwidgetが多分いっぱいあると思うので、
見つけたらまとめてみます。