😃

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

1 min read

Pineでの自動タブスライド

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

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

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

実装

パッケージ導入

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の場合

demo

.endの場合

demo

サンプルコードはこちら

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

Discussion

ログインするとコメントできます