0

Issue is that their are multiple svg images in stack. I need them to trigger only when the user tapped on filled part of the svg. So that, when it ignores on transparent part of the image, it can able to trigger behind svg image.

        Stack(
          children: [
            GestureDetector(
              onTap: () => updateSelectedPart(1),
              child: SvgPicture.asset(
                'assets/images/1.svg',
                color: selectedPart == 1
                    ? Colors.red
                    : Colors.blue,
              ),
            ),
            GestureDetector(
              onTap: () => updateSelectedPart(2),
              behavior: HitTestBehavior.translucent,
              child: SvgPicture.asset(
                'assets/images/2.svg',
                color: selectedPart == 2
                    ? Colors.red
                    : Colors.blue,
              ),
            ),
            GestureDetector(
              onTap: () => updateSelectedPart(3),
              behavior: HitTestBehavior.deferToChild,
              child: AbsorbPointer(
                absorbing: true,
                child: SvgPicture.asset(
                  'assets/images/3.svg',
                  excludeFromSemantics: true,
                  clipBehavior: Clip.none,
                  color: selectedPart == 3
                      ? Colors.red
                    : Colors.blue,
                ),
              ),
            ),
          ],
        )
kaya3
  • 47,440
  • 4
  • 68
  • 97
Rahul Kavati
  • 3,800
  • 3
  • 7
  • 15
  • 1
    Stack tap event will be prioritized bottom to top, it depends on what you are using for tap event, it would be easy if you could provide sample snippet that will reproduce your issue. – Md. Yeasin Sheikh Aug 20 '22 at 18:50
  • You can use `pointer-events:fill` in CSS or as an attribute. Please read about [pointer-events](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/pointer-events) – enxaneta Aug 20 '22 at 18:51
  • Added snippet please check – Rahul Kavati Aug 20 '22 at 19:50
  • Can you have a look again @YeasinSheikh – Rahul Kavati Aug 22 '22 at 01:27
  • I am not sure how to handle specific part with svg, but can be used Clipped widget to have boundary on tap area and here tap priority `images/3` > `images/2`... if you like to have tap event on all you can play with `behavior` – Md. Yeasin Sheikh Aug 22 '22 at 01:29

1 Answers1

-1

Ordering is bottom to top so you will need to adjust (change order in the stack) so that what might overlay another SVGs transparent part gets triggered on an action (click/touch event) not the SVG below it (Above it in this case as its bottom to top)

Alex McPherson
  • 3,185
  • 3
  • 30
  • 41