🐈
CarouselSlider.builderの真ん中表示以外の制御管理について
CarouselSlider.builder
CarouselSlider.builderを作成してスライドで表示するカードのwidgetを作成しました。
カードの中にbuttonを作成して、ボタンを押すとカードの詳細画面に遷移します。
真ん中でカードが表示される一方で、左右にもカードが表示されます。
左右のカードは全面に表示されておらず切れ端が見える程度ですが、現状ボタンが押せてしまいます。
スライドで真ん中に表示されているカード以外はボタン押下出来ない様に実装する必要があったため、そちらを作成しました。
実装
CarouselSlider.builder(
itemCount: cardArea.value.length, /// カードのwidgetリスト
carouselController: carouselController,
options: CarouselOptions(
enableInfiniteScroll: false, /// ループしない
height: 300,
onPageChanged: (index, reason) {
activeIndex.value = index;
},
),
itemBuilder: (context, index, realIndex) {
///今のカードが真ん中表示かの判断
final isActive = index == activeIndex.value;
return AbsorbPointer( /// カードのイベント制御
absorbing: !isActive,
child: cardArea.value[index],
);
},
),
真ん中に表示された際のみイベントを許可する為に、AbsorbPointerを使用しました。
AbsorbPointerは子widgetに対してあらゆるポインター入力を無力化します。
(タップ、ロングタップ、ドラッグなど)
これで左右のはみ出たカードは押せず、真ん中に表示されているカードのみイベント着火できます。
以上!!
Discussion