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?

1. 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.
2. 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.
3. 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

CodePudding user response：

Try to create local variable for the image name:

final String assetImage = 'assets/icons/add_button_icon.svg';

Card(
  elevation: 0,
  child: Column(
    children: [
      Text(
        cardName,
      ),
      Divider(
        color: dividerColor,
      ),
      SvgPicture.asset(
         assetImage,
         color: iconColor,
      ),
    ],
  ),
);

CodePudding user response：

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

CodePudding user response：

I run your example as it is, had has no problems wrapping this card inside a a InkWell, here's a Widget inspection 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?