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

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


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

Tags:

Dart

Flutter