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

user_10866639 0
Viewed 12060

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.

dart flutter
4 Answers

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

user_83427180

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

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

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

Use InkWell, wrap your widget inside it like as,

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