How to Ignore Touch Events of Widget in a Flutter?

• General

AbsorbPointer Widget is basically used to enable/disable any widgets in a flutter. So, in today’s article, we will go through how to ignore touch events of widget in a flutter.

How to Ignore Touch Events of Widget in a Flutter?

You can solve your interaction issue of not being able to interact with the widget below your blurred image by surrounding your BackdropFilter Widget with an IgnorePointer Widget.

In this blog we’ll dive into the fascinating world of ignoring touch events in Flutter widgets. As developers, we often encounter scenarios where we need to selectively disable touch interactions on certain widgets while allowing them on others. Whether you’re building a complex user interface or simply want to prevent accidental taps, understanding how to effectively ignore touch events is an essential skill to have in your Flutter toolkit. Join us as we explore various techniques and best practices for implementing touch event ignoring in Flutter widgets. Let’s get started!

This means that IgnorePointer is the solution here because it will ignore all touch events for the Widget’s passed as its child.

IgnorePointer(child: BackdropFilter(...),)

You can adjust this attribute by changing the bool value of ignoring:

IgnorePointer(ignoring: false, ...)

This will enable all touch events again.

Absorbing

Something interesting to look at here, but unrelated to the problem, is the AbsorbPointer Widget, which can be used to reflect all touch events that occur on its child onto itself.

You can either use IgnorePointer Widget or AbsorbPointer Widget.

An example will look like the below:

IgnorePointer(
  child: RaisedButton(
    onPressed: () {},
    child: Text("Unclickable button"),
  ),
);

Example (AbsorbPointer)

AbsorbPointer(
  child: RaisedButton(
    onPressed: () {},
    child: Text("Unclickable button"),
  ),
);

What’s the difference between AbsorbPointer and IgnorePointer?

If there is a widget beneath your main widget which is also capable of receiving click events, and you use IgnorePointer on the parent widget, the child widget would still receive the click events.

But using AbsorbPointer on the main widget won’t allow the other widget beneath the main widget to receive their click events.

Example showing the difference.

@override
Widget build(BuildContext context) {
  return SizedBox(
    width: double.infinity,
    child: Stack(
      children: <Widget>[
        Positioned(
          left: 0,
          width: 250,
          child: RaisedButton(
            color: Colors.red,
            onPressed: () => print("Button 1"),
            child: Text("Button 1"),
          ),
        ),
        Positioned(
          right: 0,
          width: 250,
          child: IgnorePointer( // replace this with AbsorbPointer and button 1 won't receive click
            child: RaisedButton(
              onPressed: () => print("Button 2"),
              child: Text("Button 2"),
            ),
          ),
        ),
      ],
    ),
  );
}

Conclusion:

Thanks for being with us on a Flutter Journey!!!

So in this article, we have been through how to Ignore the Touch Events of a Widget in a Flutter.

Keep Learning !!! Keep Fluttering !!!

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

FlutterAgency.com is one of the most popular online portals dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge of Flutter.

Written by Nirali Patel

Nirali Patel is a dedicated Flutter developer with over two years of experience, specializing in creating seamless mobile applications using Dart. With a passion for crafting user-centric solutions, Nirali combines technical proficiency with innovative thinking to push the boundaries of mobile app development.