Open In App

Flutter – AbsorbPointer Widget

Improve
Improve
Like Article
Like
Save
Share
Report

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 responding 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 the AbsorbPointer widget being used.

Example

Dart




import 'package:flutter/material.dart';
 
// function to trigger the app build process
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 _incrementCounter() {
    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
           // Instead use ElevatedButton
            ElevatedButton(onPressed: _incrementCounter, child: const Icon(Icons.add, color: Colors.white)),
            
           // DEPRECATED
            // RaisedButton(
            //   onPressed: _incrementCounter,
            //   color: Colors.green,
            //   child:const Icon(
            //     Icons.add,
            //     color: Colors.white,
            //   ), //Icon
            // ) //RaisedButton
          ], //<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
...
    // RaisedButton is deprecated

            // Instead use ElevatedButton

            AbsorbPointer(
              absorbing: true,
              child: ElevatedButton(
                onPressed: _incrementCounter,
                child: const Icon(Icons.add, color: Colors.white),
              ),
            ),// AbsorbPointer

Output:

 AbsorbPointer Widget with disabled button

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. 



Last Updated : 16 Jun, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads