Related Articles

Related Articles

Flutter – IgnorePointer Widget
  • Difficulty Level : Expert
  • Last Updated : 05 Nov, 2020

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

filter_none

edit
close

play_arrow

link
brightness_4
code

import 'package:flutter/material.dart';
  
void main() {
  runApp(MyApp());
}
  
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    ); //MaterialApp
  }
}
  
class MyHomePage extends StatefulWidget {
  @override
  _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: Text('GeeksforGeeks'),
        leading: IconButton(
          icon: Icon(Icons.menu),
          tooltip: 'Menu',
          onPressed: () {},
        ), //IconButton
        backgroundColor: Colors.greenAccent[400],
      ), //AppBar
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ), //Text
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ), //Text
  
            RaisedButton(
              onPressed: _incrementCounter1,
              color: Colors.cyan,
              child: Icon(
                Icons.add,
                color: Colors.white,
              ), //Icon
            ), //RaisedButton
  
            //Raisedutton
          ], //<Widget>[]
        ), //Column
      ), //Center
    ); //Scaffold
  }
}

chevron_right


Output:

 IgnorePointer widget.



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 that it is easier to see the difference in the application. 

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

   // 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:

 Raisedbutton in the widget

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 as 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(
              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>[]
          //Raisedutton
        ) //Stack

Output:

RaisedButton on top of Teal RaisedButton

Explanation: Here, we have stacked one RaisedButton widget 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(
                  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>[]
              //Raisedutton
            ) //Stack

Output:

Raised Button with IgnorePointer

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.




My Personal Notes arrow_drop_up
Recommended Articles
Page :