【Flutter】ListViewなどにスクロールバーを表示させる方法

ListViewでスクロールバーが表示されない場合の対処法

ListViewやGridViewなどのリスト表示で、スクロールバーを表示する方法

問題

FlutterアプリでListViewやGridViewなどリスト系のUIを使った場合に、そのままではスクロールバーが表示されません。

スクロールバーがないと、スライドでコンテンツを下へ下へ移動した際に、全体のどのくらいの位置に移動したのかがわかりにくくなってしまいます。

またiOSのみですが、スライドバーのつまみを掴んでスクロール移動量を増やして、速くスクロールさせることも可能になります。

以下の記事で詳しい説明をしています。

iPhoneのスクロールで一気に移動する方法

2024.1.2

iPhoneやiPadにおいて、スクロールが長い場合に指でスライドを何度もするのがしんどいので、上下の移動を素早く簡単にしたい。ブラウザ（SafariやChrome）やSNSなどの...

解決方法

ListViewやGridViewにスクロールバーを表示するには、Scrollbarを追加する必要があります。

Scrollbarで対象のリスト系WidgetをWrapするだけです。

ListViewの場合は以下のコードのようなイメージです。

Scrollbar(
  child: ListView.builder(
    itemCount: items.length,
    itemBuilder: (context, index) {
      return Container(
        child: Text("${items[index].title}"),
      );
    },
  ),
),

GridViewの場合も同様なので、ListViewをGridViewに置き換えてもらえればOKです。

筆者の場合は、GroupGridViewというパッケージを使用している箇所で適用しましたが、問題なくスクロールバーが表示されました。

ちなみにGroupGridViewは、グループごとにセクションを表示できるようなGridViewが拡張されたものです。同様にListViewの拡張のGroupListViewというものもあります。

iOSのUITableViewやUICollectionViewのようなイメージで使えるので、馴染みのある人にとっては便利です。

https://pub.dev/packages/group_grid_view

GroupGridViewに適用した例は以下のアニメーションのとおりです。