Flutter AbsorbPointer Class Use Case In Depth 2024

A widget that absorbs pointers during hit testing.

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.

When ~~ignoringSemantics~~ is true, the subtree will be invisible to the semantics layer (and thus e.g. accessibility tools).

To create a local project with this code sample, run:
flutter create --sample=widgets.AbsorbPointer.1 mysample

Pause the Game While Dialogs Pop Up

Prevent accidental interactions with the game while a settings dialog or pause menu is displayed.

View Information Without Interference

Allow users to read tooltips without triggering underlying button presses or gestures.

Guide User Focus with Selective Interactivity

Guide users through a multi-step process by selectively disabling parts of the interface until needed.

Craft Unique Scrolling Experiences

Implement horizontal carousels or other non-standard scrolling behaviors by combining AbsorbPointer with custom gesture detectors.

Display Text Without Copy-Pasting

Display sensitive information or formatted text without allowing users to copy or select it.

Protect Widgets During Transitions

Temporarily disable interactions with widgets while they’re animating to avoid unintended actions.

Guide Users with Interactive Walkthroughs

Highlight specific elements and guide users through app features with visual cues and disabled interactions.

Build Engaging Game Features

Create cooldown timers, disabled zones, or other game-specific interactions using AbsorbPointer.

Improve App Usability for All

Prevent accidental interactions for users with motor impairments or who rely on assistive technologies.

Design Unique Input Experiences

Create custom number pickers, sliders, or other input widgets with unique interactive behaviors using AbsorbPointer.

Example

import 'package:flutter/material.dart';

/// Flutter code sample for [AbsorbPointer].

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

class AbsorbPointerApp extends StatelessWidget {
  const AbsorbPointerApp({super.key});

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

class AbsorbPointerExample extends StatelessWidget {
  const AbsorbPointerExample({super.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(
            child: ElevatedButton(
              style: ElevatedButton.styleFrom(
                backgroundColor: Colors.blue.shade200,
              ),
              onPressed: () {},
              child: null,
            ),
          ),
        ),
      ],
    );
  }
}