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(),
),