Flutter ScrollViewで使える便利なパッケージ

今回はScrollViewに関連するパッケージを紹介します。

scrollview_observerというパッケージです。
https://pub.dev/packages/scrollview_observer

こちらのパッケージはScrollView内の子widgetの監視や特定の項目までのスクロールなど、ScrollViewを使うにあたり、あったら助る機能を実装してくれています。
もちろんListViewやGridViewなどでも使用可能です。

具体的にどんな感じで実装できるのか、ScrollView内の特定のアイテムにスクロールする方法を例に紹介します。

ScrollControllerの使用する
ScrollControllerを使用することで、ListViewやGridViewのようなスクロール可能なウィジェットに対してプログラム的にスクロールを制御できます。

ScrollController _scrollController = ScrollController();

アイテムへのスクロール
特定のアイテムにスクロールするには、animateToメソッドを使用します。このメソッドでスクロール位置を指定し、スクロールをアニメーションで行います。

_scrollController.animateTo(
  index * itemHeight, // アイテムの高さに基づいてスクロール位置を計算
  duration: Duration(milliseconds: 700),
  curve: Curves.ease,
);

indexはスクロールしたいアイテムのインデックスです。
itemHeightは各アイテムの高さ。アイテムの高さが均等でない場合は、リスト内のアイテムに合わせて個別に計算が必要です。

Itemの高さの取得
リスト内のアイテムが異なる高さを持つ場合、GlobalKeyを使ってアイテムのサイズを動的に取得し、そのサイズに基づいてスクロール位置を決定できます。

GlobalKey _key = GlobalKey();
final RenderBox renderBox = _key.currentContext.findRenderObject() as RenderBox;
final position = renderBox.localToGlobal(Offset.zero);
final height = renderBox.size.height;

以下はボタンを押してListViewの特定のアイテムにスクロールするコードの見本です。

class ScrollToItemExample extends StatelessWidget {
  final ScrollController _scrollController = ScrollController();
  final List<String> items = List.generate(100, (index) => "Item $index");

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Scroll to Item')),
      body: Column(
        children: <Widget>[
          ElevatedButton(
            onPressed: () {
              _scrollController.animateTo(
                50.0 * 20, // 20番目のアイテムにスクロール
                duration: Duration(milliseconds: 500),
                curve: Curves.ease,
              );
            },
            child: Text('Scroll to Item 20'),
          ),
          Expanded(
            child: ListView.builder(
              controller: _scrollController,
              itemCount: items.length,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text(items[index]),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}

どうでしょうか？
非常に簡単に組み込むことができますね。
ぜひ使ってみてください。