Flutter - AbsorbPointer Widget - GeeksforGeeks

21 Feb, 2022
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. 
const AbsorbPointer(
{Key key,
bool absorbing: true,
Widget child,
bool ignoringSemantics}
)
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            ) //RaisedButton          ], //<Widget>[]        ), //Column      ), //Center    ); //Scaffold  }}
Output: 
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:
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. 
simranarora5sos
android
Flutter
Flutter-widgets
Dart
Flutter
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Flutter - DropDownButton Widget
Flutter - Custom Bottom Navigation Bar
Flutter - Checkbox Widget
ListView Class in Flutter
Flutter - Flexible Widget
Flutter - DropDownButton Widget
Flutter - Custom Bottom Navigation Bar
Flutter Tutorial
Flutter - Checkbox Widget
Flutter - Flexible Widget