Disable Multi Touch On A Widget In Flutter

In this post we will build a widget that can disable multi touch on a widget in Flutter app.

Introduction

Sometimes, you might need to disable multi touch or tap on a widget in your Flutter application. For example there is a list of items and only one of those items should be clickable at once. You do not want users to tap or touch with three fingers simultaneously and select three items at once.

Basically, you want to prevent users from multi-tapping or multi-touching.

Multi touch on list
Multi touch on list

So how can we prevent multi tap or multi touch gestures?

Setup

Let’s say we have a simple list of items that creates a list widget as shown in the .gif above:

Currently, each item on the list like name of months supports multi tap gesture. We want to prevent this action.

Creating A Custom Gesture Recognizer

Flutter allows creating custom gesture recognizer widgets with the help of GestureRecognizer base class. There are already two abstract implementations of this class for multi tap and single tap gestures.

Since we are looking to implement a single tap gesture, we will create an implementation class for OneSequenceGestureRecognizer.

Implementation For Single Touch

Start by creating a custom widget that can allow it’s child widgets to have single touch gesture only.

In it’s build function, we will return a gesture detector widget that supports single touch gesture only. So, let’s create another class called _SingleTouchRecognizer for this purpose

We will come back to the implementation of
_SingleTouchRecognizer later. For now, let’s complete setup of SingleTouchRecognizerWidget widget.

The build method now returns a RawGestureDetector that handles gestures from _SingleTouchRecognizer class.

Become A Flutter Expert With This Course

Next, we need to implement the methods in our recognizer class.

We start by overriding addAllowedPointer method of GestureRecognizer.

Here, the startTrackingPointer method registers the related events to be handled by the recognizer. Then resolve function is responsible for ensuring if the touch event should be allowed to be continued or not.

Parameters For Resolve

If we pass GestureDisposition.rejected, the current touch event is not resolved. So this touch event will be passed down and allowed to continue. However if GestureDisposition.accepted is passed, then touch event is resolved and no other events are called past this.

We want to resolve a tap event if there is already another touch event created preventing multi-tap/multi-touch.

Finally, we reset the value of control variable _p via the handleEvent function.

This completes our implementation of _SingleTouchRecognizer class.

Now, just wrap the widget which needs multi-tap, multi-touch disabled by the custom widget you just created.

Reference: StackOverflow

Check out more useful articles on Flutter here.

About the author