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

環境

  • 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)) ) ) ) ] ) )
Code language: PHP (php)

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

  • ListWheelScrollViewを-90度傾ける
  • ListWheelScrollViewの1つ1つの要素を90度傾ける

こうして横スクロールを実現しています。 scrollDirectionのプロパティがあれば楽なのですけどね^^;

実行するとこんな感じになります。

最後までお読みいただきありがとうございました。

Related Posts