How to implement the AbsorbPointer widget in Flutter?

· 4 min read
How to implement the AbsorbPointer widget in Flutter?

Absorb pointer is a widget that absorbs pointers during hit testing. So, in this article, we will see how to implement the AbsorbPointer widget in Flutter.

How to implement the AbsorbPointer widget in Flutter?

AbsorbPointer is a built-in widget in the flutter which absorbs the pointer. It prevents it’s subtree from being clicked, tapped, scrolled, dragged, and respond to hover.  In flutter, most widgets already come with an option to disable them. 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.

When absorbing is true, this widget prevents its subtree from receiving pointer events by terminating hit testing at itself. It still consumes space during layout and paints its child as usual. It just prevents its children from being the target of located events, because it returns true from RenderBox.hitTest.

Properties:

  • absorbing: Whether this widget absorbs pointers during hit testing.
  • child: The widget below this widget is in the tree.
  • hashCode: The hash code for this object.
  • ignoringSemantics: Whether the semantics of this render object is ignored when compiling the semantics tree.
  • key: Controls how one widget replaces another widget in the tree.
  • runtimeType: A representation of the runtime type of the object.

Example:

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

/// This is the main application widget.
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: const Center(
          child: MyStatelessWidget(),
        ),
      ),
    );
  }
}

/// This is the stateless widget that the main application instantiates.
class MyStatelessWidget extends StatelessWidget {
  const MyStatelessWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: AlignmentDirectional.center,
      children: <Widget>[
        SizedBox(
          width: 200.0,
          height: 100.0,
          child: ElevatedButton(
            onPressed: () {},
            child: null,
          ),
        ),
        SizedBox(
          width: 100.0,
          height: 200.0,
          child: AbsorbPointer(
            absorbing: true,
            child: ElevatedButton(
              style: ElevatedButton.styleFrom(
                primary: Colors.blue.shade200,
              ),
              onPressed: () {},
              child: null,
            ),
          ),
        ),
      ],
    );
  }
}

Output:

Absorb Pointer

Conclusion:

Thanks for being with us on a Flutter Journey!

So, in this article, we have seen how to implement the AbsorbPointer widget in Flutter. Also, feel free to comment and provide any other suggestions regarding Flutter.

Flutter Agency is our portal Platform dedicated to Flutter Technology and Flutter Developers. Also, the portal is full of cool resources from Flutter like Flutter Widget GuideFlutter Projects, Code libs and etc.

Flutter Agency is one of the most popular online portals dedicated to Flutter Technology. Daily thousands of unique visitors come to this portal to enhance their knowledge of Flutter.

Leave a Reply