CarouselView children are not clickable

Question

I am using a CarouselView on Flutter, and I want to be able to click on each of the ClipRRects that are members of the carousel to go to a new page. The carousel consists of ClipRRects which contain stacks.

Initially, I wrapped the stack in a gesture detector and set the HitTestBehaviour to translucent, this didn't work. Then I wrapped the whole ClipRRect in a gesture detector and this also didn't work. For context, this is my code:

import 'package:flutter/material.dart';

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

  

  @override
  Widget build(BuildContext context) {
    return CarouselView(
      itemExtent: 320,
      shrinkExtent: 320,
      itemSnapping: true,
      padding: const EdgeInsets.all(8),
      children: List<Widget>.generate(10, (int index) {
        return MyPracticeCard();
      }),
    );
  }
}



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

  void viewPractice(BuildContext context)
  {
    print("Card pressed");
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => viewPractice(context),
      behavior: HitTestBehavior.translucent,
      child: ClipRRect(
        borderRadius: BorderRadius.circular(20),
        child: Stack(
          children: [
            Container(
              decoration: const BoxDecoration(
                image: DecorationImage(
                  image: AssetImage("assets/GP_front_image.jpg"),
                  fit: BoxFit.cover,
                  alignment: Alignment.topCenter,
                ),
              ),
            ),
            Container(
              decoration: const BoxDecoration(
                gradient: LinearGradient(
                  colors: [
                    Colors.black,
                    Colors.transparent,
                  ],
                  begin: Alignment.bottomCenter,
                  end: Alignment.center,
                  stops: [0.0, 1],
                ),
              ),
            ),
            const Positioned(
              bottom: 15,
              left: 15,
              right: 15,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    "London Bridge General Practice",
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 16,
                      fontWeight: FontWeight.w500,
                    ),
                    overflow: TextOverflow.ellipsis,
                    maxLines: 1,
                  ),
                  // SizedBox(height: 2), // Optionally, uncomment for spacing
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Expanded(
                        child: Text(
                          "0.2 miles",
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: 16,
                            fontWeight: FontWeight.w400,
                          ),
                          overflow: TextOverflow.ellipsis,
                          maxLines: 1,
                        ),
                      ),
                      
                        Row(
                          mainAxisAlignment: MainAxisAlignment.end,
                          children: [
                            Text(
                              "4.5",
                              style: TextStyle(
                                color: Colors.white,
                                fontSize: 16,
                                fontWeight: FontWeight.w400,
                              ),
                              overflow: TextOverflow.ellipsis,
                              maxLines: 1,
                            ),
                            SizedBox(width: 2,),
                            Icon(
                              Icons.star,
                              color: Colors.white, // Color of the star icon
                              size: 18, // Size of the star icon
                            ),
                            
                          ],
                        ),
                    
                    ],
                  ),
                ],
              ),
            ),
            Positioned(
              top: 10,
              right: 10,
              child: ClipRRect(
                borderRadius: BorderRadius.circular(10),
                child: Image.asset(
                  "assets/HCA_logo.jpg",
                  width: 50,
                  height: 50,
                  fit: BoxFit.cover,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 1

CarouselView has built-int onTap which is a Inkwell and the GestureDetector tap event skipped by this.

You can use like

return CarouselView(
  itemExtent: 325,
  itemSnapping: true,
  onTap: (int index) {
    //
  },