How to make this corousel slider clickable in flutter - flutter

Question

Here is my code for corousel slider in Flutter, I want to make this slides clickable how can I do that?
When an image in corousel slider is clicked I want to open screen particular to the image category.
class _CarouselExampleState extends State<CarouselExample> {
List imgNews = [
"images/groceries.jpg",
"images/image_1.png",
"images/photographer.jpg",
"images/electrician.jpg",
];
#override
void initState() {
super.initState();
}
List<T> map<T>(List list, Function handler) {
List<T> result = [];
for (var i = 0; i < list.length; i++) {
result.add(handler(i, list[i]));
}
return result;
}
int _current = 0;
#override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Stack(
children: [
CarouselSlider(
options: CarouselOptions(
autoPlay: true,
height: 150,
viewportFraction: 1.0,
onPageChanged: (index, reason) {
setState(() {
_current = index;
});
},
),
items: imgNews.map(
(url) {
return Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
ClipRRect(
child: Image.asset(
url,
fit: BoxFit.fill,
height: 150,
width: 300,
),
),
],
)
);
},
).toList(),
),
Padding(
padding: EdgeInsets.only(top:150),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: map<Widget>(imgNews, (index, url) {
return Container(
width: 6.0,
height: 8.0,
margin: EdgeInsets.symmetric(vertical: 10.0, horizontal: 5.0),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: _current == index ? Colors.red : Colors.blueGrey,
),
);
}),
),
),
],
)
]
);
}
}
I tried many ways but I was not able to make this corousel_slider clickable, anyone please help, when an image is clicked i want to open screen particular to the image category.

Answer 1

You can use InkWell widget wrapped in Material -
child: Material(
color: Colors.yellow,
child: InkWell(
onTap: () {
// Do something.
},
),
),
In your specific case -
...
items: imgNews.map(
(url) {
return Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
ClipRRect(
child: Material(
color: Colors.yellow,
child: InkWell(
onTap: () {
// Do something.
},
child: Image.asset(
URL,
fit: BoxFit.fill,
height: 150,
width: 300,
),
),
),
),
],
),
);
},
).toList(),
...

Answer 2

Here is How you can do that
First Make Carousel Image clickable
in your Case: Wrap it With GestureDetector
ClipRRect(
child: Image.asset(
url,
fit: BoxFit.fill,
height: 150,
width: 300,
),
),
Second Then on Tap of Image Get the Image Index and Pass it to A Function
onTap: () {
imgList.indexOf(url);
indexMethod(imgList.indexOf(url).toString());
},
Last Create a Method
indexMethod(String index) {
switch (index) {
case '0':
{
Navigator.push(
context,
MaterialPageRoute(builder: (context) => HelpPage()),
);
}
break;
case '1':
{
Navigator.push(
context,
MaterialPageRoute(builder: (context) => UpdatesPage()),
);
}
break;
case '2':
{
Navigator.push(
context,
MaterialPageRoute(builder: (context) => UserProfile()),
);
}
break;
}
}
I Just Added This Functionality to My CarouselSlider :D