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: () {}, // handle your image tap here
  child: Image.asset(
    'assets/cat.jpg',
    fit: BoxFit.cover, // this is the solution for border
    width: 110.0,
    height: 110.0,
  ),
)

Answer 2

Material(
        child: InkWell(
          onTap: () {},
          child: ClipRRect(
              borderRadius: BorderRadius.circular(20.0),
              child: Image.asset('assets/cat.jpg',
                  width: 110.0, height: 110.0),
            ),
        ),
    )

Answer 3

You can use InkWell as show by @Murat Aslan.

And you can also use GestureDetector as shown below.

Material(
      child: GestureDetector(
        onTap: () {},
        child: Container(
          child: ClipRRect(
            borderRadius: BorderRadius.circular(20.0),
            child: Image.asset('assets/cat.jpg',
                width: 110.0, height: 110.0),
          ),
        ),
      ),
    )

Answer 4

An alternative is to use a FlatButton with an Image as a child:

FlatButton(
    onPressed: () {
      print('I got clicked');
    },
    child: Image.asset('images/ball1.png'),
  ),

Answer 5

To render a material splash during tap on image, use Ink.image

InkWell(
  onTap: () {},
  child: Ink.image(
    image: AssetImage('assets/cat.jpg'),
    // fit: BoxFit.cover,
    width: 110,
    height: 110,
  ),
)