At some point in our app, we have a requirement to disable touch inputs. The one immediate use case coming into my mind is the loading time after Submitting Forms.

Whatever may be our use-case, Flutter has widgets (:smile:) for this too. Specifically, there are 2 widgets for this use case.

AbsorbPointer Widget

The first one is the AbsorbPointer Widget. What we have to do is to wrap the widget we want to disable touch with this Widget.

This widget has a property called absorbing. If this is set to true, the touch will be disabled for the child widgets.

If it is false, the widgets will behave normally.

AbsorbPointer(
    absorbing: true,
    child: MaterialButton(
        child: Text("Click Me"),
        onPressed: () {
        // nothing :)
        },
        color: Colors.purple,
    ),
)

The Above is an example of a disabled Button. We can’t click on the Button while absorbing is set to true.

IgnorePointer Widget

The next one is IgnorePointer Widget. The only noticeable difference with the first one is the change in name of the widget and the property which controls the Touch Status.

Here also, we have to wrap the widget we want to disable touch with this widget.

In this widget, the property which controls touch is ignoring.

Like the first one, if we set ignoring to true, we can’t click the underlying widgets. If it’s false it’ll behave normally.

IgnorePointer(
    ignoring: true,
    child: MaterialButton(
        child: Text("Click Me"),
        onPressed: () {
        // nothing :)
        },
        color: Colors.purple,
    ),
)

This is the same example with IgnorePointer Widget. We have to change ignoring to false if we want to click the Button.

Ideas

In Both of these scenarios, an ideal way would be to don’t hard code the values for ignoring and absorbing.

Instead, we can use a variable and control them from outside.

bool ignoring = true; // A global Variable

//  Inside A Column
IgnorePointer(
    ignoring: ignoring,
    child: MaterialButton(
        child: Text("Click the below button to toggle status"),
        onPressed: () {
            ignoring = !ignoring
        },
        color: Colors.purple,
    ),
),
MaterialButton(
    child: Text("Click Me to Toggle my Status"),
    onPressed: () {
        ignoring = !ignoring
    },
    color: Colors.purple,
),

In the above example, Clicking the below button will toggle the touch status of the above Button.

Wrap

You can find more articles related to Firebase Here

Hope you found something useful here.

I’m always open to suggestions!

Let me know your suggestions and opinions on Twitter DM or drop a mail a [email protected].

If you’re feeling too generous, you can support me through Buy Me a Coffee.

Finally, if you found this helpful, please share this within your reach so that more people can benefit from this. And Follow me on Twitter for getting more posts like these 😉.