Flutter: Ignore touch events on a Widget

I want to have a blurred image on top of my other widgets, however, I cannot interact with the widgets below it when I do that.

Solution

You can solve your interaction issue (not being able to interact with the Widget below your blurred image) by surrounding your BackdropFilter with an IgnorePointer.

This means that IgnorePointer is the solution here because it will ignore all touch events for the Widget's passed as its child.

IgnorePointer(child: BackdropFilter(...),)

You can adjust this attribute by changing the bool value of ignoring:

IgnorePointer(ignoring: false, ...)

This will enable all touch events again.

Absorbing

Something interesting to look at here, but unrelated to the problem, is the AbsorbPointer Widget, which can be used to reflect all touch events that occur on its child onto itself.

You can either use IgnorePointer or AbsorbPointer.

• IgnorePointer

  IgnorePointer(
    child: ElevatedButton(
      onPressed: () {},
      child: Text('Not clickable Button'),
    ),
  );
  

• AbsorbPointer

  AbsorbPointer(
    child: ElevatedButton(
      onPressed: () {},
      child: Text('Not clickable Button'),
    ),
  );
  

---

What's the difference?

If there is a widget beneath your main widget which is also capable of receiving click events, and you use IgnorePointer on the parent widget, the child widget would still receive the click events.

But using AbsorbPointer on main widget won't allow the other widget (beneath main widget) to receive their click events.

Example showing the difference.

@override
Widget build(BuildContext context) {
  return SizedBox(
    width: double.infinity,
    child: Stack(
      children: <Widget>[
        Positioned(
          left: 0,
          width: 250,
          child: ElevatedButton(
            color: Colors.red,
            onPressed: () => print("Button 1"),
            child: Text("Button 1"),
          ),
        ),
        Positioned(
          right: 0,
          width: 250,
          child: IgnorePointer( // replace this with AbsorbPointer and button 1 won't receive click
            child: ElevatedButton(
              onPressed: () => print("Button 2"),
              child: Text("Button 2"),
            ),
          ),
        ),
      ],
    ),
  );
}

UPDATED

The other answers are very appealing.

Lets see a practical example of using IgnorePointer widget.

This case is pretty common when we started trying to implement something like toggling a selection on a widget to delete or something like for example.

Example Senario : Holding on a WhatsApp message and delete option coming on top. if tap anywhere else while this option active, it will go.

I implemented it like this.

appBar: AppBar(
         title: Text('MyApp'), 
         actions: [
            if (_selected != null) // <-- Delete button only appear something selected.
               IconButton(
               icon: Icon(Icons.delete),
               onPressed: () { 
                   // Delete Code here
               }
         ]
      ),
body: GestureDetector(
           behavior: HitTestBehavior.opaque,
           onTap: () { 
                 print('Tapped');
                 setState(() { _selected = null });
           },
           child: IgnorePointer(
           ignoring: _selected != null ? true : false, // <-- Ignore only when selecting something.
           child: Column(
             children: [
              ...

              // This is a sample message 

              GestureDetector(
              onLongPress: () {  
                 setState(() { _selected = messageId  });
              }
              child: Container(
                 child: Text('This is a message'),
              ),
               
              ...

RESULT:

https://i.stack.imgur.com/GJOBq.gif" width="300">

Hope it will help somebody! Have a nice day.