tapToSelect not working in some cases

[feinstein]

tapToSelect is not working in some cases, I can't figure out what it could be, here's a simple reproducible example:

import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:flutter_custom_carousel/flutter_custom_carousel.dart';

class Carousel extends StatelessWidget {
  const Carousel({
    required this.children,
    super.key,
  });

  final List<Widget> children;

  @override
  Widget build(BuildContext context) {
   double heightToTranslation(double scrollRatio) => scrollRatio * 60;

    double scrollToScale(double scrollRatio) {
      const min = 0.8;
      const max = 1.0;

      return (min + (scrollRatio + 1) * (max - min)).clamp(min, max);
    }

    return LayoutBuilder(
      builder: (context, constraints) {
        return CustomCarousel(
          onSelectedItemChanged: (item) => print('item: $item'),
          itemCountBefore: 2,
          itemCountAfter: 0,
          loop: true,
          effectsBuilder: (int index, double scrollRatio, Widget child) {
            final translation = heightToTranslation(scrollRatio);
            final scale = scrollToScale(scrollRatio);
            print('$index $scale $translation $scrollRatio');
            return Transform(
              transform: Matrix4.translationValues(0, translation, 0)..scale(scale, scale, 1),
              alignment: Alignment.topCenter,
              child: child,
            );
          },
          children: children,
        );
      },
    );
  }
}

class DemoCarouselPage extends StatelessWidget {
  const DemoCarouselPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(24),
      child: Center(
        child: SizedBox(
          height: 250,
          child: Carousel(
            children: [
              for (int i = 0; i < 15; i++)
                Container(
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(20),
                    border: Border.all(
                      color: Colors.black,
                      width: 1,
                    ),
                  ),
                  child: Center(
                    child: Text(
                      'Card $i',
                      style: TextStyle(color: Colors.black),
                    ),
                  ),
                )
            ],
          ),
        ),
      ),
    );
  }
}

[dishankjindal1]

GSkinner team recommended way to handle custom code via CustomCarousel.effectsBuilderFromAnimate their own defined construct. You can even look at their blog link

so using this code below, tapToSelect will work like a charm.

effectsBuilder: CustomCarousel.effectsBuilderFromAnimate(
  effects: EffectList()
    ..slideY(
      begin: -0.2,
      end: 0.2,
    )
    ..scale(
      begin: const Offset(0.9, 0.9),
      end: const Offset(1, 1),
    ),
),