Flutter: AbsorbPointer – Absorb Touch Events

Have you ever needed to temporarily stop interacting with a part of your app, like freezing a button while something loads? That’s where Flutter’s AbsorbPointer comes in. It allows you to stop the app from responding to touches in a specific area, like placing an invisible shield over that part of the screen. In this article, we’ll explore how it works and when you might use it.

Table of Contents

What Are Touch Events?

In Flutter, a touch event happens whenever you tap, swipe, or press on the screen. Widgets like buttons, sliders, and scroll views listen for these touch events to perform actions when you interact with them.

However, there are times when you might not want a widget to respond immediately. For example, you might want to block interactions temporarily while something loads or during an animation. That’s where AbsorbPointer becomes helpful. It allows you to block touch events without hiding or removing the widget.

What is AbsorbPointer?

AbsorbPointer is a widget that blocks touch interactions from reaching its child. You can think of it like placing an invisible shield over a widget. The widget is still visible, and it takes up space in the layout, but it won’t respond when you tap or interact with it.

Basic Usage Example

Here’s a simple example to show how AbsorbPointer works:

import 'package:flutter/material.dart';

void main() {
  runApp(const AbsorbPointerExample());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: const AbsorbPointerHome(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text("Flutter: AbsorbPointer"),
      ),
      body: Center(
        child: AbsorbPointer(
          absorbing: true, // Absorbs all touch events
          child: ElevatedButton(
            onPressed: () {
              ScaffoldMessenger.of(context).showSnackBar(
                const SnackBar(content: Text("You tapped the button!")),
              );
            },
            child: const Text("Click Me"),
          ),
        ),
      ),
    );
  }
}

In this example, the button is still visible on the screen, but it won’t respond when you tap it. The AbsorbPointer widget blocks the touch events before they can reach the button.

How It Works

AbsorbPointer prevents touch events from reaching the widget it wraps. Even though the widget remains visible, it will not respond to taps or gestures. The widget is still part of the layout, but interaction is disabled while the touch events are absorbed.

Customizing AbsorbPointer Behavior

You can control whether AbsorbPointer blocks touch events using its absorbing property.

When absorbing is set to true, it blocks all touch events.
When set to false, touch events are allowed to pass through.

This gives you the flexibility to turn touch blocking on or off based on your app’s needs.

Code Example: Toggling AbsorbPointer Dynamically

In this example, you can press a button to toggle AbsorbPointer on and off:

import 'package:flutter/material.dart';

void main() {
  runApp(const AbsorbPointerExample());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Theme.of(context).colorScheme.inversePrimary,
          title: Text("Flutter: AbsorbPointer"),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [MyWidget()],
          ),
        ),
      ),
    );
  }
}

class MyWidget extends StatefulWidget {
  const MyWidget({super.key});

  @override
  MyWidgetState createState() => MyWidgetState();
}

class MyWidgetState extends State<MyWidget> {
  bool _isAbsorbing = true;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        AbsorbPointer(
          absorbing: _isAbsorbing,
          child: ElevatedButton(
            onPressed: () {
              // Show Snackbar when the button is tapped
              ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(content: Text("You tapped me!")),
              );
            },
            child: Text("I'm the target"),
          ),
        ),
        SizedBox(height: 20),
        ElevatedButton(
          onPressed: () {
            setState(() {
              _isAbsorbing = !_isAbsorbing;
            });
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(
                content: Text(_isAbsorbing ? "Touch Disabled" : "Touch Enabled"),
              ),
            );
          },
          child: Text(_isAbsorbing ? "Enable Touch" : "Disable Touch"),
        ),
      ],
    );
  }
}

In this example, tapping the second button will toggle the touch-blocking feature of AbsorbPointer on and off dynamically.

When to Use AbsorbPointer

Here are a few scenarios where AbsorbPointer is particularly useful:

During a loading screen: When you don’t want the user to interact with other parts of the app while something loads.
While an animation is playing: To prevent the user from interacting with the app until the animation completes.
During a tutorial: If you want to guide the user step-by-step, controlling when they can interact with specific parts of the app.

It’s like saying, “Wait a moment, I’ll let you interact soon.”

Visual Demo Idea

Imagine placing a transparent glass sheet over a button. You can still see the button, but you can’t press it because the glass is in the way. That’s how AbsorbPointer works—it prevents touch events from reaching the button while keeping it visible.

Common Mistakes and Tips

Remember: The widget will still be visible, but it won’t respond to touches. It’s not hidden, just inactive.
If you need to control touch interactions dynamically, make sure you update the absorbing property accordingly to allow or block touches at the right time.

Conclusion

AbsorbPointer is a handy tool to control when widgets should respond to touch events. Think of it as a temporary shield that blocks touch interactions. You can enable or disable this shield as needed, helping you prevent accidental taps or guide users through certain steps in your app. It’s simple to implement and can greatly enhance user experience when you need more control over interactions.