FlutterのListWheelScrollViewで横スクロールを実現する

環境

MacOS BigSur 11.4

Flutter 2.5.3

Dart 2.14.3

ListWheelScrollViewとは？

Flutter標準で入っているWidgetの１つです。名前の通り、スクロールビューを実現してくれます。

スクロールビューなのですが、スクロールの向きを設定するプロパティがありません。なので横スクロールでこのWidgetを使いたい時はちょっと工夫が必要です。

この記事では ListWheelScrollViewを使って横スクロールを実現する方法をまとめます。

RotatedBoxを使う

RotatedBoxというWidgetと組み合わせて使います。

簡単に説明すると、childに指定するWidgetを回転して表示させることができるWidgetです。

RotatedBoxについてはこちらの公式サイトを参照ください。

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

実装

100個の要素を表示してみます。

RotatedBox(
  quarterTurns: -1,
  child: ListWheelScrollView(
    offAxisFraction: -0.5,
    diameterRatio: 1.4,
    itemExtent: 200,
    children: [
       for ( var i in List.generate(100, (i) => i) )
         RotatedBox(
            quarterTurns: 1,
            child: Container(
            width: MediaQuery.of(context).size.width * 0.3,
            height: MediaQuery.of(context).size.height * 0.2,
            color: Colors.blue[100],
            child: Center(
              child: Text("Index: $i", style: TextStyle(fontSize: 30.sp))
            )
         )
      )
    ]
  )
)

具体的に何をやっているかというと