Skip to content
Related Articles

Related Articles

Improve Article

Flutter – AbsorbPointer Widget

  • Difficulty Level : Hard
  • Last Updated : 31 Oct, 2020
Geek Week

AbsorbPointer is a built-in widget in flutter which absorbs pointer, in other words, it prevents its subtree from being clicked, tapped, scrolled, dragged, and respond to hover. In flutter, most widgets already come with an option to disable them for example in a RaisedButton we can set the onClicked function to null to disable, or we can use NeverScrollableScrollPhysics( ) to disable a ListView. But if we want to disable a whole widget tree or even a full screen at once, we can do it with the help of the AbsorbPointer widget. IgnorePointer is also a similar widget in flutter, which also prevents its children from being clicked. 

Constructor of AbsorbPointer Class: 

const AbsorbPointer(
{Key key,
bool absorbing: true,
Widget child,
bool ignoringSemantics}
)

Properties of AbsorbPointer Widget:

  • absorbing: This property takes in a boolean as a parameter and it controls whether the tap on the widget gets absorbed 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: In this example, we will see how we can use AbsorbPointer to disable an IconButton and a RaisedButton.

First, we will see an app without AbsorbPointer widget being used.

Dart




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 _incrementCounter() {
    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: _incrementCounter,
              color: Colors.green,
              child: Icon(
                Icons.add,
                color: Colors.white,
              ), //Icon
            ) //Raisedutton
          ], //<Widget>[]
        ), //Column
      ), //Center
    ); //Scaffold
  }
}

Output: 

 AbsorbPointer Widget



Explanation: Taking a look at the code of this flutter app, we can see that there are three declared classes, the first one is MyApp which is a StatelessWidget, which in turn returns a MaterialApp. And the home property is set to MyHomePage class, which is our second class and is also a StatefulWidget. And the third class is _MyHomePageState which extends the state of MyHomePage class. Inside _MyHomePageState class, the app starts with a Scaffold. And on the top of the screen, we have an app bar with title Text(‘GeeksforGeeks’). The leading property is holding 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. So whenever the button has pressed the value in the counter increases by one.

Now, we will wrap the RaisedBotton and the IconButton with the AbsorbPointer and see how it goes.

// Code snippet of IconButton and RaisedButton wrapped in AbsorbPointer widget 

// IconButton wrapped in AbsorbPointer 
...
 leading: AbsorbPointer(
          absorbing: true,
          child: IconButton(
            icon: Icon(Icons.menu),
            tooltip: 'Menu',
            onPressed: () {},
          ), //IconButton
        ), //AbsorbPointer
...
// RaisedButton wrapped in AbsorbPointer 
...
  AbsorbPointer(
              absorbing: true,
              child: RaisedButton(
                onPressed: _incrementCounter,
                color: Colors.green,
                child: Icon(
                  Icons.add,
                  color: Colors.white,
                ), //Icon
              ), //RaisedButoon
            ) //AbsorbPointer
...



Output:

 AbsorbPointer Widget with disabled button

Explanation: Now, in the above output we can see that the RaisedButton has been disabled ( although we cannot see it)  and it cannot be clicked now. And when the cursor hovers above the IconButton the tooltip doesn’t popup as it is also disabled.

So, this is how we can use AbsorbPointer to Disable button, we can also use it to disable a much larger widget tree such as the whole screen at once. 

Want a more fast-paced & competitive environment to learn the fundamentals of Android?
Click here to head to a guide uniquely curated by our experts with the aim to make you industry ready in no time!



My Personal Notes arrow_drop_up
Recommended Articles
Page :