How to add onClick on image.asset in flutter?

user_10866639 0
Viewed 55374

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.

dart flutter
5 Answers

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,
    ),
  ),
)
user_66186220 
Material(
        child: InkWell(
          onTap: () {},
          child: ClipRRect(
              borderRadius: BorderRadius.circular(20.0),
              child: Image.asset('assets/cat.jpg',
                  width: 110.0, height: 110.0),
            ),
        ),
    )
user_98258320

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

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'),
  ),
user_33472960

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,
  ),
)
user_61316110
Related