How to send Pointer events to Lower children in Stack

Question

As the title says, when using Stacks in flutter, only the "last" rendered children can be interacted with if that child overlaps all other children. In my application i have a ListWheelScrollView which is contained in a Stack, and afterwards "styled" with gradients that lie on top of the ScrollView.

This makes more sense when given an example.

There is an existing issue on almost this exact situation here: Flutter- GestureDetector not working with containers in stack

However, it assumes you are working with a gesture detector.

Stack(children: <Widget>[
          Container(
            height: 250,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Container(
                  width: _style.fontSize * 1.5,
                  child: ListWheelScrollView.useDelegate(
                      controller: fixedExtentScrollController,
                      physics: FixedExtentScrollPhysics(),
                      itemExtent: _style.fontSize * 1.5,
                      childDelegate: ListWheelChildLoopingListDelegate(
                          children: hours
                              .map((hour) => hour < 10
                                  ? Text(
                                      "0$hour",
                                      style: _style,
                                    )
                                  : Text(
                                      "$hour",
                                      style: _style,
                                    ))
                              .toList())),
                ),
                Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Text(
                      ":",
                      style: _style,
                    ),
                    SizedBox(
                      height: 25,
                    )
                  ],
                ),
                Container(
                  width: _style.fontSize * 1.5,
                  child: ListWheelScrollView.useDelegate(
                      physics: FixedExtentScrollPhysics(),
                      itemExtent: _style.fontSize * 1.5,
                      childDelegate: ListWheelChildLoopingListDelegate(
                          children: minutes
                              .map((minute) => minute < 10
                                  ? Text(
                                      "0$minute",
                                      style: _style,
                                    )
                                  : Text(
                                      "$minute",
                                      style: _style,
                                    ))
                              .toList())),
                ),
              ],
            ),
          ),
          Container(
                height: 250,
                child: Column(
                  children: <Widget>[
                    Container(
                      height: 75.3,
                      decoration: BoxDecoration(
                          gradient: LinearGradient(
                              begin: Alignment.bottomCenter,
                              end: Alignment.topCenter,
                              colors: [
                            Colors.white.withOpacity(0.1),
                            Theme.of(context).scaffoldBackgroundColor
                          ])),
                    ),
                    Center(
                        child: Container(
                            height: 83.3,
                            width: 220,
                            decoration: BoxDecoration(
                              border: Border.all(
                                  color: Color(0xFFc0ccd4), width: 5),
                            ))),
                  ],
                ),
          )
        ]),

The design works perfectly as expected, however i am no longer able of scrolling since the containers are on top of the scroll widget.

Any workarounds?

Answer 1

You only need to wrap all of your widgets that are not supposed to receive tap events in IgnorePointer widgets.
In the comments it was said that you should use AbsorbPointer, however, you do not want to catch tap events on the ignoring widgets.

In your case, you want to wrap your upper, upper as in top of the stack, Container in an IgnorePointer widget:

Stack(
  children: <Widget>[
    Container(...),
    IgnorePointer(
      child: Container(...),
    ),
  ],
)

Learn more.