How do deal with nested InkWell with Flutter?

Question

Suppose you have a few nested InkResponse, if you tap on the inner one, all of the parent will actually trigger the splash effect even though they will loose in the tap arena for the right tapped widget. The effect will be something like this:

How to prevent such behavior? How to display the splash only for the tapped widget? In this example image it's being used a Container > Row (with InkReponse) > Icon (also with InkResponse). This will also happen if you use material buttons.

Answer 1

You might want to try IgnorePointer

Answer 2

This worked for me

Center(
            child:Container(
              width: 100,
              height: 100,
              child: Card(
                child: InkWell(
                  splashColor: color3,
                  onTap: () {

                  },
                  child: Column(
                    children: [
                      SizedBox(
                        height: 10,
                      ),
                      IconButton(
                        splashRadius: 7,
                        splashColor: Colors.pink,
                        onPressed: () {},
                        icon: SvgPicture.asset(
                          ImageConst.bellIcon,
                          width: 20,
                          height: 20,
                          color: Colors.black,
                        ),
                      ),
                      SizedBox(
                        height: 10,
                      ),
                      Text("text"),
                    ],
                  ),
                ),
              ),
            ),
          )

Answer 3

Try to wrap the icon into GestureDetector with the empty handler + Padding.