😃
PageViewの変更に伴い、タブの自動スライド Pineリリース記念🎉🎉🎉
Pineでの自動タブスライド
ここではPageViewの変更に従ってタブを自動スライドさせています。
また、自動スライドではタブが画面の真ん中に来るように実装しています。
自動スライドがない時のタブの動きについて
これでは現在選択中のタブが真ん中ではなくなり、タブの個数が多い場合はこのように選択中のタブが見えなくなります。
実装
パッケージ導入 このパッケージをインストール
実装コードについて
サンプルコード
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の場合
サンプルコードはこちら
Discussion