TabBarの選択ボタンを中央寄せにするアニメーション付き無限スクロール化するTips

Flutter

こんにちは。 エキサイト株式会社の高野です。

今回はTabBarをListviewで実装することを前提にお話ししていくことを前提としていきます。

FlutterでTabBarを無限スクロール化する方法はいくつかあり、ライブラリでいうと infinite_listview や indexed_list_view などがあります。 純粋にListviewでたくさんの要素を確保し、中央のoffsetをinitialOffsetで指定するという方法もあります。
今回で言いますと、ボタンをタップした際にそのボタンを中央へ移動するアニメーションを付与した上で無限スクロール化したいという要件です。

各バージョン

Flutter: 2.0.6
iOS: 14.5
Android: 11.0

使用ライブラリ

scroll_to_index: 2.0.0

実装方法

使用ライブラリで挙げたようにアニメーションに scroll_to_index を使用し、無限スクロールは素のListviewで実装します。

ListView.builder(
   controller: AutoScrollController(),
   scrollDirection: Axis.horizontal,
   itemCount: 999,
   itemBuilder: (_, index) {
     return AutoScrollTag(
        key: ValueKey(index),
        controller: AutoScrollController(),
        index: index,
        child: Button(),
      );
   },
),

表示の方はこのようになっています。initialoffsetを中央あたりで指定してあげることによりTabBarの見た目の方は完成です。 この後に、ボタンのタップ処理発火時に

controller.scrollToIndex(index, preferPosition: AutoScrollPosition.middle);

以上で中央へのスクロールアニメーションができます。

まとめ

いかがでしたでしょうか？ 中央のOffsetをinitialOffsetで指定するとその端末でしか中央にならないので今後initialOffsetを動的に設定する記事も書けたらいいなと思っています。 元々タブ要素の三倍確保しoffsetを監視して、常に中央のタブ要素を表示するという方法を試みていました。 前に要素を追加した時などoffsetが変わらず無限スクロールを実装できませんでしたので他にも無限スクロールを実装する方法があるならばご教示していただけると幸いです。