How to add an Onclick event to an image which is inside CircleAvatar Widget in flutter?

Question

I have a circular image inside circleAvatar on clicking which I want to open an alert dialog box. My question is how to add clicking event inside CircleAvatar?

This is my code :

        Column(children: <Widget>[
        SizedBox(height: 32.0),
        CircleAvatar(
          radius: 55.0,
          backgroundImage: ExactAssetImage('assets/cat.jpg'),
        ),
        Container(
          height: 20.0,
        ),
        Text('01:29:30'),
        Text(
          'Avik Kumar Mandal',
          style: TextStyle(fontSize: 20),
        ),

Expected: onclick event on the image which is inside Circular avatar P.s it is a profile picture on clicking which a dialog box should appear.

Answer 1

You can wrap your circular avatar with a gesture detector

Column(children: <Widget>[
        SizedBox(height: 32.0),
        GestureDetector(
                onTap: () {
                 //do what you want here
                },
                child:  CircleAvatar(
                       radius: 55.0,
                        backgroundImage: ExactAssetImage('assets/cat.jpg'),
                ), 
           ),

        Container(
          height: 20.0,
        ),
        Text('01:29:30'),
        Text(
          'Avik Kumar Mandal',
          style: TextStyle(fontSize: 20),
        ),

Or

InkWell(
  onTap: () => print("image clicked"),
  child: AnyWidget()
),

Now generalize my answer.

If you want to set OnClickListener to some widget that onTap is not implemented by default, then you should wrap the widget with GestureDetector or InkWeel

Answer 2

You can use GestureDetector but you will lose ripple effect on image click, so a better solution would be to use InkWell. Wrap your CircleAvatar in InkWell

InkWell(
  onTap: () => print("image clicked"),
  child: CircleAvatar(
    backgroundImage: ExactAssetImage('assets/cat.jpg'),
    radius: 55,
  ),
),

Answer 3

Another way is to wrap it in an IconButton, which has the benefit of a circular ripple effect.

IconButton(
  icon: CircleAvatar(),
  onPressed: () {},
)

Answer 4

Use InkWell, wrap your widget inside it like as,

InkWell(
  onTap: () => _yourMethodHere,
CircleAvatar(
          radius: 55.0,
          backgroundImage: ExactAssetImage('assets/cat.jpg'),
  ),
),