Flutter disable touch on the entire screen

Question

Is there any way to prevent my screen from receiving touch events, I don't want to disable touch for every Widget in my app. I just want to lock the app so that it doesn't receive touch events. How can I do that?

https://docs.flutter.io/flutter/widgets/IgnorePointer-class.html — anmol.majhail, Jan 16 '19 at 16:11

score 46 · Accepted Answer · answered Jan 16 '19 at 15:58

46

You can wrap your widget in AbsorbPointer and it won't receive touches. To enable the touch again, you can set absorbing: false

AbsorbPointer(
  child: YourWidget(...),
);

answered Jan 16 '19 at 15:58

1

really a short and sweet way to do it. – Saurabh Prajapati Oct 12 '20 at 14:20

Paresh Mangukiya · Answer 2 · 2022-03-11T08:10:04.577

We can do it in two ways First is as the @Sanjayrajsinh said

AbsorbPointer used answer is given above
IgnorePointer

IgnorePointer widget that is invisible during hit testing.

The usage of IgnorePointer is the same as that of AbsorbPointer, and the effect is the same. The usage is as follows:

To disable touch on the widget you need to wrap your entire widget inside IgnorePointer

If you wrap any widget in Flutter with the IgnorePointer Widget, you can enable or disable that widget. That means if you wrap your whole UI in IgnorePointer Widget, then you can control the user interaction on that UI by toggling the ‘ignoring’ property of IgnorePointer Widget. When ‘ignoring‘ is true, the IgnorePointer Widget absorbs all interaction in the widget’s child and in a way disabling it.
```
IgnorePointer(
  ignoring: **YOUR_CONDITION**
  child: Container(...),
),
```

Sanjayrajsinh · Answer 3 · 2021-01-22T06:35:00.280

2

Two way to do :

AbsorbPointer
IgnorePointer

Check difference with example here :

edited Jan 22 '21 at 06:35

answered Oct 02 '20 at 07:12

Sanjayrajsinh

11,663
3
65
73

score 0 · Answer 4 · answered Aug 30 '21 at 14:25

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 this.

RESULT:

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'),
              ),
               
              ...

Hope it will help somebody! Have a nice day.

Flutter disable touch on the entire screen

4 Answers4

Two way to do :