PageViewの変更に伴い、タブの自動スライド Pineリリース記念🎉🎉🎉

Pineでの自動タブスライド

ここではPageViewの変更に従ってタブを自動スライドさせています。
また、自動スライドではタブが画面の真ん中に来るように実装しています。

自動スライドがない時のタブの動きについて

これでは現在選択中のタブが真ん中ではなくなり、タブの個数が多い場合はこのように選択中のタブが見えなくなります。

実装

パッケージ導入

https://pub.dev/packages/scroll_to_index
このパッケージをインストール

実装コードについて

サンプルコード

sampleView.dart

ListView.builder(
              scrollDirection: Axis.horizontal,
              controller: autoScrollController, //autoscrollControllerを使う
              itemCount: tabContent.length,
              itemBuilder: (BuildContext context, int index) {
                return AutoScrollTag(
                  key: ValueKey(index),
                  controller: autoScrollController,
                  index: index,
                  child: GestureDetector(
                    onTap: () {
                      setState(() {
                        selectedTab = index;
                      });
                      autoScrollController.scrollToIndex(index,
                          preferPosition: AutoScrollPosition.middle);
                      pageController.jumpToPage(
                        index,
                      );
                    },
                    
			以下省略

自動スライドの位置について

上記のサンプルコードの下から5行目のAutoScrollPosition.middleについて.middleで指定すると、自動タブスライドが真ん中になります。

.beginの場合

.endの場合

サンプルコードはこちら

https://github.com/kai-nakao/auto_tabbar