Home > Back-end >  How to make CarouselSlider clickable flutter
How to make CarouselSlider clickable flutter

Time:06-07

I have this code but the image is not clickable. And I don’t know how to implement it. So if you know please help. I've been trying for 4hour now.

List of the image

   late CarouselSlider carouselSlider;
  List imageList = [
    'assets/images/F1.png',
    'assets/images/F2.png',
    'assets/images/F3.png',
    'assets/images/F4.png',
    'assets/images/F5.png',
  ];

The CarouselSlider

 CarouselSlider(
                    options: CarouselOptions(
                      height: 200.0,
                      autoPlay: true,
                      reverse: false,
                      enlargeCenterPage: false,
                      enableInfiniteScroll: false,
                      scrollDirection: Axis.horizontal,
                      autoPlayInterval: const Duration(seconds: 6),
                      autoPlayAnimationDuration: const Duration(seconds: 3),
                    ),
                    items: imageList
                        .map(
                          (item) => Padding(
                            padding: const EdgeInsets.only(top: 9.0),
                            child: Card(
                              margin: const EdgeInsets.only(
                                top: 10.0,
                                bottom: 20.0,
                              ),
                              elevation: 0.0,
                              shape: RoundedRectangleBorder(
                                borderRadius: BorderRadius.circular(10.0),
                              ),
                              child: ClipRRect(
                                borderRadius: const BorderRadius.all(
                                  Radius.circular(10.0),
                                ),
                                child: Image.asset(item,
                                  fit: BoxFit.fill,
                                ),
                              ),
                            ),
                          ),
                        )
                        .toList(),
                  ),

CodePudding user response:

You can use InkWell or GestureDetecture as parent of Padding or Card

CodePudding user response:

Simply wrap the CarouselSlider item with Inkwell or GestureDetector

CarouselSlider(
                items: imageList
                    .map(
                      (item) => GestureDetector(
                          onTap() => myFunction(),
                          child: Container(),
                     )
                    .toList(),
              ),
  • Related