Interact with widget in Stack with translucent widget covering it

Question

I have a Widget which I want to 'fade out' at the bottom, so I've put it into a Stack with a Container on top of it, with the appropriate gradient as the Container's background. However, the container seems to be consuming all touch events, so I can't interact with the Widget behind it, which is not desirable because the Widget is still mostly visible. Is there any way to change this behaviour?

Will you please share your current UI and if possible the proposed one as well? — Ashiq Ullah, Sep 28 '21 at 17:22
Please consider sharing code-snippet that will reproduce the same problem and read [how-to-ask](https://stackoverflow.com/help/how-to-ask) — Md. Yeasin Sheikh, Sep 28 '21 at 17:42

score 6 · Accepted Answer · edited Sep 29 '21 at 05:50

6

Here is how to do that:

Code:

IgnorePointer(
  child: YourContainerWidget)

or, depending on your exact objective, you may want to try this:

AbsorbPointer(
  child: YourContainerWidget)

See more info here

edited Sep 29 '21 at 05:50

Dharman

30,962
25
85
135

answered Sep 29 '21 at 05:44

Canada2000

1,688
6
14

Thanks, this is the perfect solution as I want the widget to still be visible. – mosh.jinton Sep 29 '21 at 10:41

score 0 · Answer 2 · answered Sep 28 '21 at 17:33

0

Once the widget is fully transparent you can remove it from the UI tree with an if() or ternary, i.e: if(opacity != 0) YourWidget() or opacity == 0 ? SizedBox() : YourWidget()

You can also wrap it with an IgnorePointer() widget.

answered Sep 28 '21 at 17:33

Pat9RB

580
3
7

score 0 · Answer 3 · answered Sep 28 '21 at 19:08

You can warp your widget with Visibility. This solution will not remove your widget from the tree, so You can easily reuse it later. However, you should consider if it will just not be better to remove it from the widget tree.

    Visibility(
      visible: _isVisible
      child: FooWidget(),
    )

Interact with widget in Stack with translucent widget covering it

3 Answers3