IconButton onPressed not working | InkWell onTap not working | Flutter

Question

So I've seen this weird behaviour in flutter and that is when I'm using a SvgPicture as a child widget to IconButton or InkWell.

I've this card which has two parts separated by a divider. First part is a TextWidget which shows the card name and the Second part is a SVG (add button icon)

Card(
  elevation: 0,
  child: Column(
    children: [
      Text(
        cardName,
      ),
      Divider(
        color: dividerColor,
      ),
      SvgPicture.asset(
        'assets/icons/add_button_icon.svg',
         color: iconColor,
      ),
    ],
  ),
);

What I want to do ? I want to be able to execute a function whenever this card is clicked (be that it's cardName or the SVG icon that I'm using)

What I did?

I wrapped this whole card inside an InkWell and added onTap callback. Now the problem with it is that the function only gets executed when the card's name is clicked. No matter how much I click on the SVG icon, it never gets called.
Then I also tried adding another InkWell as a parent to this SVG icon but with no luck. It never gets called no matter how much I click.
I thought there might be some issue with me using InkWell as this SVG's parent. I then wrapped this SVG inside an IconButton and tried to give it an onPressed callback. This did not work either.

No matter where I put InkWell, the callback only gets executed when I click the card name and not the whole card or the SVG icon.

Any idea what I'm doing wrong and how I can resolve this ?

EDIT: The whole widget looks like this:

InkWell renderCard(
      BuildContext context,
      String cardName,
      int index,
      int? counter,
      Color dividerColor,
      Color textColor,
      Color iconColor,
      void Function() onPress) {
    return InkWell(
      onTap: onPress,
      child: Card(
        elevation: 0,
        color: index == counter ? cPrimaryColor : cSecondaryColor,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(cDefaultPadding),
        ),
        child: Padding(
          padding: const EdgeInsets.symmetric(vertical: cDefaultPadding),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                cardName,
                style: Theme.of(context).textTheme.titleMedium!.copyWith(
                    color: textColor,
                    fontSize:
                        2.2 * TextSizeConfig.blockSizeVertical!.toDouble()),
              ),
              Divider(
                color: dividerColor,
              ),
              spacer(1),
              SvgPicture.asset(
                'assets/icons/add_button_icon.svg',
                color: iconColor,
              ),
              spacer(1),
              Text(
                'ADD DOCUMENT',
                style: Theme.of(context).textTheme.bodyMedium!.copyWith(
                    color: textColor,
                    fontSize:
                        1.5 * TextSizeConfig.blockSizeVertical!.toDouble()),
              ),
            ],
          ),
        ),
      ),
    );
  }

Overall Structure : SafeArea -> SingleChildScrollView -> Column -> Stack -> Column -> renderCard

Try wrapping the column with an `InkWell` (as a child of `Card`) — HTMHell, May 09 '22 at 20:56
I run your example as it is, had has no problems wrapping this card inside a a InkWell, here's a [Widget inspection](https://i.stack.imgur.com/HulGJ.png) that shows it working. Maybe it's something from the library you using, or even another problem. Can you send a more complete snippet of your code? — Jictyvoo, May 09 '22 at 22:05
That's what I'm concerned about. It should usually work. I've edited my post to add the whole widget code as well as the overall page structure. — Divyam Dhadwal, May 09 '22 at 22:11
Only using all that you said, the code don't even run, because the vertical layout constraint is not respected. Even that, when I run you function snippet, it works correctly without problems. So I recommend that you use the Flutter Inspector Tool to show us how is the InkWell and SvgPicture in the WidgetTree — Jictyvoo, May 10 '22 at 01:22

score 0 · Answer 1 · answered May 09 '22 at 21:51

I tested your icon and here is my code:

Widget build(BuildContext context) {
    return Scaffold(
    backgroundColor: Colors.white,
      body: Center(
        child: InkWell(
          onTap: (() => print('tapped')),
          child: Card(
            elevation: 0,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                const Text('name'),
                const Divider(color: Colors.red,),
                SvgPicture.asset('assets/icons/plus.svg', color: Colors.blue,)
              ],
            ),
          ),
        ),
      ),
    );
  }

As I click on the icon, it works. See here

Did the same. Still not working on my end. I even changed the icon to something like Icon(Icons.add)..It still does not work. — Divyam Dhadwal, May 09 '22 at 22:05

IconButton onPressed not working | InkWell onTap not working | Flutter

1 Answers1