Flutter – IgnorePointer Widget

IgnorePointer is a built-in widget in flutter which is similar to the AbsorbPointer widget, they both prevent their children’s widget from pointer-events which are taping, clicking, dragging, scrolling, and hover. They both do the same thing in two different ways, the AbsorbPointer widget absorbs all the pointer-events, which means the pointers events are completely terminated and cannot be passed anywhere else. On the other hand, the IgnorePointer widget just ignores the pointer-events without terminating it, which means if there is any other element below the IgnorePointer widget tree then it will be able to experience that pointer-event.  

Constructor of IgnorePointer Class

const IgnorePointer(
{Key key,
bool ignoring: true,
bool ignoringSemantics,
Widget child}
)

Properties of IgnorePointer Widget: 

• ignoring: This property takes in a boolean as a parameter and decided whether to ignore the pointer-events or not.
• ignoringSemantics: This property also takes a boolean as a parameter and it controls whether this widget should be ignored by screen readers and other featured or not to get the information about the app.

Example: With the help of an example we will see how to implement the IgnorePointer widget. 

Dart

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

// This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyHomePage(),
    ); //MaterialApp
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  // ignore: library_private_types_in_public_api
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter1() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('GeeksforGeeks'),
        leading: IconButton(
          icon: const Icon(Icons.menu),
          tooltip: 'Menu',
          onPressed: () {},
        ), //IconButton
        backgroundColor: Colors.greenAccent[400],
      ), //AppBar
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ), //Text
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ), //Text
            // RaisedButton is deprecated and will be removed in the next release.
            // We can use ElevatedButton instead.
            ElevatedButton(
              onPressed: _incrementCounter1,
              child: const Icon(Icons.add, color: Colors.white),
            ),

            // DEPRECATED
            // RaisedButton(
            // onPressed: _incrementCounter1,
            // color: Colors.cyan,
            // child: Icon(
            // Icons.add,
            // color: Colors.white,
            // ), //Icon
            // ), //RaisedButton

            //RaisedButton
          ], //<Widget>[]
        ), //Column
      ), //Center
    ); //Scaffold
  }
}

Output:

Explanation: This is a simple flutter application, taking a look at the code, we can see that there are three declared classes, the first one is MyApp (StatelessWidget), which is returning a MaterialApp. The Second class is MyHomePage (StatefulWidget), it is also set as the home property in the app. And the third class is _MyHomePageState which extends the state of MyHomePage class. Inside _MyHomePageState class, the app starts with a Scaffold. And at the top of the screen, we have an app bar with title Text (‘GeeksforGeeks’). The leading property is having an IconButton with a menu icon and a tooltip. Whenever we hover or long-press the IconButton the tooltip pops up. In the body of the app, the parent widget is Center, which is holding a Column widget with the mainAxisAlignment property set as the Centre. All this is followed by the text (‘You have pushed the button this many times), counter, and the button that we see on the screen.  The text above the button is given a style of headline4. The button is having teal color and a white add icon as its child. So whenever the button has pressed the value in the counter increases by one, and the _incrementCounter1 is the function responsible for that. This flutter application is similar to what we have in the article AbsorbPoitner so it is easier to see the difference in the application. 

Now, we will wrap the Raisedbutton in the widget and see what changes.

  IgnorePointer(
              ignoring: true,
              child: ElevatedButton(
                onPressed: _incrementCounter1,
                child: const Icon(Icons.add, color: Colors.white),
              ),
            ),
            
    // RaisedButton is deprecated
    // Use ElevatedButton instead        

   // RaisedButton wrapped in IgnorePointer
   IgnorePointer(
              ignoring: true,
              child: RaisedButton(
                onPressed: _incrementCounter1,
                color: Colors.cyan,
                child: Icon(
                  Icons.add,
                  color: Colors.white,
                ), //Icon
              ), //RaisedButton
            ), //IgnorePointer

Output:

Explanation: Here, we can see that the RaisedButton cannot be pressed now, as to ignore pointer is ignoring all the pointer-events. This is similar behavior to what we would get from the AbsorbPointer.

Now, to see how IgnorePointer is different from AbsorbPointer we will put another RaisedButton above the already present button.

      //Stacked Green RaisedButton on top of Teal RaisedButton
         Stack(
          children: <Widget>[
           // RaisedButton is deprecated and should not be used
                // Use ElevatedButton instead
               RaisedButton(
              onPressed: _incrementCounter1,
              color: Colors.cyan,
              child: Icon(
                Icons.add,
                color: Colors.white,
              ), //Icon
            ), //RaisedButton
            RaisedButton(
              onPressed: _incrementCounter1,
              color: Colors.green,
              child: Icon(
                Icons.add,
                color: Colors.white,
              ), //Icon
            ), //RaisedButton
          ], //<Widget>[]
          //RaisedButton
        ) //Stack

Output:

Explanation: Here, we have stacked one RaisedButton widget with having green color on top of the already present teal RaisedButton widget using Stack Widget. And we can see that counter is working fine, as whenever the button is pressed the number increases by a count of one. The green button is also using the same function as the teal button.

Now, we will wrap the green button with IgnorePointer widget

    //Wrapped Second Raised Button with IgnorePointer
           Stack(            
              children: <Widget>[
              
              // RaisedButton is deprecated and should not be used
                // Use ElevatedButton instead
                RaisedButton(
                  onPressed: _incrementCounter1,
                  color: Colors.cyan,
                  child: Icon(
                    Icons.add,
                    color: Colors.white,
                  ), //Icon
                ), //RaisedButton
                IgnorePointer(
                  ignoring: true,
                  ignoringSemantics: true,
                  child: RaisedButton(
                    onPressed: _incrementCounter1,
                    color: Colors.green,
                    child: Icon(
                      Icons.add,
                      color: Colors.white,
                    ), //Icon
                  ), //RaisedButton
                ), //IgnorePointer
              ], //<Widget>[]
              //RaisedButton
            ) //Stack

Output:

Explanation:  In this app, the green RaisedButton is on the top of the teal RaisedButton and is wrapped with IgnorePointer widget. In the above example, we have seen that when we apply IgnorePointer widget to a single RaisedButton it stopped responding to pointer-events. But here we can clearly see that the counter is still functioning, and the reason behind this is IgnorePointer simply makes its children widgets ignore the pointer-events without terminating them as opposed to AbsorbPointer which terminates pointer-events. What it means is the pointer-event can be passed on to another widget or widget-tree which is stacked below it.

So this is how IgnorePointer can be implemented in flutter. Also, read the AbsorbPointer article for more information.