How to add onClick on image.asset in flutter?

Question

I am using three images on clicking which will navigate to other page so how should I use onClick on these images? My code is below:

Row(       children: [         Expanded(           child: Column(             children: <Widget>[               Container(                   child: ClipRRect(                 borderRadius: BorderRadius.circular(20.0),                 child: Image.asset('assets/cat.jpg',                     width: 110.0, height: 110.0),               )),               Text(                 'Tickets',                 style:                     TextStyle(fontSize: 16.0, fontWeight: FontWeight.bold),               )             ],           ),         ),         Expanded(           child: Column(             children: <Widget>[               Container(                   child: ClipRRect(                 borderRadius: BorderRadius.circular(20),                 child: Image.asset('assets/cat.jpg',                     width: 110.0, height: 110.0),               )),               Text(                 'Buy Tickets',                 style:                     TextStyle(fontSize: 16.0, fontWeight: FontWeight.bold),               )             ],           ),         ),         Expanded(           child: Column(             children: <Widget>[               Container(                   child: ClipRRect(                     borderRadius: BorderRadius.circular(20),                     child: Image.asset('assets/cat.jpg',                         width: 110.0, height: 110.0),                   )),               Text(                 'Prizes',                 style:                     TextStyle(fontSize: 16.0, fontWeight: FontWeight.bold),               )             ],           ),         ),       ],     ), 

Expected : Adding an onClick on images I used GestureDetector but it is throwing error so I need to know what I should use and how.

Answer 1

I read other answers and found that you were having issues with border, try this solution.

GestureDetector(   onTap: () {}, // Image tapped   child: Image.asset(     'assets/cat.jpg',     fit: BoxFit.cover, // Fixes border issues     width: 110.0,     height: 110.0,   ), ) 

If you want splash effects, then use Ink.image or Ink with decoration.

InkWell(   onTap: () {}, // Image tapped   splashColor: Colors.white10, // Splash color over image   child: Ink.image(     fit: BoxFit.cover, // Fixes border issues     width: 100,     height: 100,     image: AssetImage(       'assets/cat.jpg,     ),   ), )