環境
- MacOS BigSur 11.4
- Flutter 2.5.3
- Dart 2.14.3
ListWheelScrollViewとは?
Flutter標準で入っているWidgetの1つです。名前の通り、スクロールビューを実現してくれます。
スクロールビューなのですが、スクロールの向きを設定するプロパティがありません。なので横スクロールでこの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))
)
)
)
]
)
)
具体的に何をやっているかというと
- ListWheelScrollViewを-90度傾ける
- ListWheelScrollViewの1つ1つの要素を90度傾ける
こうして横スクロールを実現しています。 scrollDirection
のプロパティがあれば楽なのですけどね^^;
実行するとこんな感じになります。
最後までお読みいただきありがとうございました。