忽略对 svg 图像 flutter 透明部分的 onTap 操作

Question

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

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