🐈

CarouselSlider.builderの真ん中表示以外の制御管理について

2025/01/19に公開

CarouselSlider.builder

CarouselSlider.builderを作成してスライドで表示するカードのwidgetを作成しました。
カードの中にbuttonを作成して、ボタンを押すとカードの詳細画面に遷移します。

真ん中でカードが表示される一方で、左右にもカードが表示されます。
左右のカードは全面に表示されておらず切れ端が見える程度ですが、現状ボタンが押せてしまいます。

スライドで真ん中に表示されているカード以外はボタン押下出来ない様に実装する必要があったため、そちらを作成しました。

https://pub.dev/packages/carousel_slider

実装


    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を使用しました。
https://api.flutter.dev/flutter/widgets/AbsorbPointer-class.html

AbsorbPointerは子widgetに対してあらゆるポインター入力を無力化します。
(タップ、ロングタップ、ドラッグなど)

これで左右のはみ出たカードは押せず、真ん中に表示されているカードのみイベント着火できます。

以上!!

Discussion