Flutter: IgnorePointer – Ignore Touch Events

Have you ever needed part of your app to stop reacting to taps for a moment? Flutter’s IgnorePointer lets you do that. It tells your app to ignore touch events in a certain area—almost like making part of the screen untouchable, without hiding anything. In this article, you’ll learn how it works and how to use it in real apps.

Table of Contents

What Are Touch Events?

In Flutter, every time you tap, swipe, or press something, that’s a touch event. Widgets like buttons and sliders listen for these events and do something in response—like running a function when a button is pressed.

Sometimes, though, you may want to block these touch events temporarily. Maybe while a task is loading or during a tutorial step. That’s where IgnorePointer comes in.

What is IgnorePointer?

IgnorePointer is a widget that makes its child—and everything inside—ignore touch input. It’s like putting an invisible cover over the widget that says, “Pretend I’m not even here for now.”

The widget still shows up on screen and takes up space in the layout. You just can’t interact with it.

Basic Usage Example

Here’s a simple example that shows how IgnorePointer works:

import 'package:flutter/material.dart';

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

class IgnorePointerExample extends StatelessWidget {

  const IgnorePointerExample({super.key});

  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: const IgnorePointerHome(),
    );

  }
}

class IgnorePointerHome extends StatelessWidget {

  const IgnorePointerHome({super.key});

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text("Flutter: IgnorePointer"),
      ),
      body: Center(
        child: IgnorePointer(
          ignoring: true, // Ignores all touch input
          child: ElevatedButton(
            onPressed: () {
              ScaffoldMessenger.of(context).showSnackBar(
                const SnackBar(content: Text("You tapped the button!")),
              );
            },
            child: const Text("Click Me"),
          ),
        ),
      ),
    );

  }
}

In this code, even though the button is visible, it won’t respond to taps because it’s wrapped in IgnorePointer with ignoring: true.

How It Works

When IgnorePointer wraps a widget, it stops any touch events from reaching that widget or its children. The widget still shows up on screen and keeps its layout, but it won’t respond to interaction.

It’s perfect when you want something to look clickable but not be clickable—for example, during a loading animation or while disabling part of the UI.

Enabling and Disabling IgnorePointer

You can control whether touches are ignored using the ignoring property:

ignoring: true – Touches are ignored.
ignoring: false – Touches work normally.

You can change this value dynamically to turn interaction on or off depending on what your app needs.

Example: Toggling IgnorePointer

Here’s how you can toggle IgnorePointer on and off with a button:

import 'package:flutter/material.dart';

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

class IgnorePointerExample extends StatelessWidget {

  const IgnorePointerExample({super.key});

  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: const IgnorePointerToggle(),
    );

  }
}

class IgnorePointerToggle extends StatefulWidget {

  const IgnorePointerToggle({super.key});

  @override
  State<IgnorePointerToggle> createState() => _IgnorePointerToggleState();

}

class _IgnorePointerToggleState extends State<IgnorePointerToggle> {

  bool _ignoring = true;

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text("Flutter: IgnorePointer"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            IgnorePointer(
              ignoring: _ignoring,
              child: ElevatedButton(
                onPressed: () {
                  ScaffoldMessenger.of(context).showSnackBar(
                    const SnackBar(content: Text("Button tapped")),
                  );
                },
                child: const Text("Tap Me"),
              ),
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  _ignoring = !_ignoring;
                });
              },
              child: Text(_ignoring ? "Enable Touch" : "Disable Touch"),
            ),
          ],
        ),
      ),
    );

  }
}

When you tap the second button, it toggles the IgnorePointer state for the first button. Try turning it off and on to see how it works.

Better Example: Multiple Buttons

Let’s wrap a whole group of buttons with IgnorePointer. That way, none of them respond to touch while still being visible.

import 'package:flutter/material.dart';

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

class IgnorePointerExample extends StatelessWidget {

  const IgnorePointerExample({super.key});

  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: const MyHomePage(),
    );

  }
}

class MyHomePage extends StatefulWidget {

  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();

}

class _MyHomePageState extends State<MyHomePage> {

  bool _ignoring = true;

  void _toggleIgnoring() {
    setState(() {
      _ignoring = !_ignoring;
    });
  }

  void _showMessage(String message) {
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(content: Text(message)),
    );
  }

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter: IgnorePointer'),
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            IgnorePointer(
              ignoring: _ignoring,
              child: Column(
                children: [
                  ElevatedButton(
                    onPressed: () => _showMessage("You tapped Button 1"),
                    child: const Text("Button 1"),
                  ),
                  ElevatedButton(
                    onPressed: () => _showMessage("You tapped Button 2"),
                    child: const Text("Button 2"),
                  ),
                  ElevatedButton(
                    onPressed: () => _showMessage("You tapped Button 3"),
                    child: const Text("Button 3"),
                  ),
                ],
              ),
            ),
            const SizedBox(height: 30),
            ElevatedButton(
              onPressed: _toggleIgnoring,
              child: Text(_ignoring ? "Enable Touch" : "Disable Touch"),
            ),
          ],
        ),
      ),
    );

  }
}

In this example:

All three buttons are inside IgnorePointer.
When _ignoring is true, tapping any of the buttons does nothing.
The toggle button lets you turn touch back on for all the buttons.

When to Use IgnorePointer

Here are a few times when IgnorePointer can be helpful:

When showing a progress indicator and you want to stop all touch input below it.
During animations or transitions where interaction should be paused.
In custom overlays where you want parts of the screen to be visible but not interactive.

Visual Demo Idea

Imagine putting a big sheet of glass over your phone screen. You can still see everything behind it, but you can’t touch anything because the glass is in the way. That’s how IgnorePointer works—it blocks touches, but not visuals.

Common Tips

The widget still exists in the layout—it just won’t respond to touches.
Use this when you want to ignore input completely without affecting layout or rendering.

Conclusion

IgnorePointer is a simple but powerful tool in Flutter. It lets you show a widget but ignore any touch events. This helps when you want to keep the UI visible but make it non-interactive for a moment. It’s a great way to control when and how users interact with your app.