Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to disable multi-touch in mobile application using flutter

This question is purely based on GestureDetector flutter.

For Example: In Application, GestureDetector class is implemented so here by-default it support multi-touch, now need to disable this multi-touch so what could be the best way of a solution.

GestureDetector reference link: https://docs.flutter.io/flutter/widgets/GestureDetector-class.html

like image 228
Karim Mirazul Avatar asked Aug 06 '18 16:08

Karim Mirazul


People also ask

How do you stop multiple tap flutters?

Another option is to use debouncing to prevent this kind of behaviour ie with easy_debounce, or implementing your own debounce. Save this answer. Show activity on this post. And when you disable the component, it starts ignoring the touches within the boundary of the widget.

How do I turn off multiple touch?

To prevent multi touch you should turn off splitMotionEvents or windowEnableSplitTouch attribute inside ViewGroup were buttons are located.

How do I turn off touch in Flutter?

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.


2 Answers

Create an instance of OnlyOnePointerRecognizerWidget widget and pass any Widget as a child to it. OnlyOnePointerRecognizerWidget will recognize only one pointer.

import 'package:flutter/material.dart' show
  StatelessWidget, Widget, BuildContext, RawGestureDetector,
  GestureRecognizerFactory, GestureRecognizerFactoryWithHandlers
;
import 'package:flutter/gestures.dart' show
  OneSequenceGestureRecognizer, PointerDownEvent, GestureDisposition,
  PointerEvent
;
    
class OnlyOnePointerRecognizer extends OneSequenceGestureRecognizer {
  int _p = 0;

  @override
  void addPointer(PointerDownEvent event) {
    startTrackingPointer(event.pointer);

    if (_p == 0) {
      resolve(GestureDisposition.rejected);
      _p = event.pointer;
    } else {
      resolve(GestureDisposition.accepted);
    }
  }
    
  @override
  String get debugDescription => 'only one pointer recognizer';
    
  @override
  void didStopTrackingLastPointer(int pointer) {}
    
  @override
  void handleEvent(PointerEvent event) {
    if (!event.down && event.pointer == _p) {
      _p = 0;
    }
  }
}
    
class OnlyOnePointerRecognizerWidget extends StatelessWidget {
  final Widget? child;

  OnlyOnePointerRecognizerWidget({ this.child });

  @override
  Widget build(BuildContext context) {
    return RawGestureDetector(
      gestures: <Type, GestureRecognizerFactory>{
        OnlyOnePointerRecognizer: GestureRecognizerFactoryWithHandlers<OnlyOnePointerRecognizer>(
          () => OnlyOnePointerRecognizer(),
          (OnlyOnePointerRecognizer instance) {}
        )
      },
      child: child
    );
  }
}

Implementation example:

OnlyOnePointerRecognizerWidget(
  child: Text('test')
)
like image 155
Igor Gorokhov Avatar answered Oct 01 '22 08:10

Igor Gorokhov


Issue fixed by using ImmediateMultiDragGestureRecognizer() the below code shows how we can use it.

child: RawGestureDetector(
              behavior: HitTestBehavior.opaque,
              gestures: <Type, GestureRecognizerFactory>{
                ImmediateMultiDragGestureRecognizer:
                    GestureRecognizerFactoryWithHandlers<
                        ImmediateMultiDragGestureRecognizer>(
                  () => ImmediateMultiDragGestureRecognizer(),
                  (ImmediateMultiDragGestureRecognizer instance) {
                    instance..onStart = _handleOnStart;
                  },
                ),
              },
    Drag _handleOnStart(Offset position) {
   if (count < 1) {
     setState(() {
       count++;
     });
     return _DragHandler(_handleDragUpdate, _handleDragEnd);
}
return null;
  }

  void _handleDragUpdate(DragUpdateDetails update) {
    //code is here
  }

  void _handleDragEnd(DragEndDetails details) {
    //code is here
   }
   setState(() {
    count = 0;
   });
   }


   class _DragHandler extends Drag {
  _DragHandler(this.onUpdate, this.onEnd);

  final GestureDragUpdateCallback onUpdate;
  final GestureDragEndCallback onEnd;

  @override
  void update(DragUpdateDetails details) {
   onUpdate(details);
  }

  @override
  void end(DragEndDetails details) {
    onEnd(details);
}
@override
void cancel(){}
}
like image 27
Manukumar S B Avatar answered Oct 01 '22 08:10

Manukumar S B