Flutter) I want to know how to detect the number of fingers with the GestureDetector

Viewed 270

I'm making a whiteboard app and I'm going to implement the draw and zoom functions through the GestureDetector.

Each test went well, but if I use both together, only Zoom function is used in onScaleUpdate() and Draw function is not output.

So I'm going to implement it so that if I touch two fingers, I can only use the Zoom function, and if I touch one, I can only use the Draw function. Can you tell the number of fingers touched using the Gesture Detector?

Or is there another good way?

The following is part of my code

 GestureDetector(
  onScaleStart: (details) {
    Tool tool = context.read<DrawProvider>().tool;
    double seletedPenWidth = context.read<DrawProvider>().seletedPenWidth;
    Color seletedPenColor = context.read<DrawProvider>().seletedPenColor;

    RenderBox box = context.findRenderObject() as RenderBox;

    // zoom test
    context.read<DrawProvider>().onScaleStart(details);

    // Use Pen
    if (tool == Tool.pen) {
      Offset point = box.globalToLocal(details.focalPoint);
      point = Offset(point.dx, point.dy);

      currentLine = DrawingModel(
        pointList: [point],
        color: seletedPenColor,
        width: seletedPenWidth,
      );

    } else {
      // TODO Other Tool
    }
  },

  onScaleUpdate: (details) {
    Tool tool = context.read<DrawProvider>().tool;
    double seletedPenWidth = context.read<DrawProvider>().seletedPenWidth;
    Color seletedPenColor = context.read<DrawProvider>().seletedPenColor;

    RenderBox box = context.findRenderObject() as RenderBox;

    // zoom test
    context.read<DrawProvider>().onScaleUpdate(details);

    if (tool == Tool.pen) {
      Offset point =
          box.globalToLocal(details.focalPoint);
      point = Offset(point.dx, point.dy);

      List<Offset> path = List.from(currentLine!.pointList!)..add(point);

      currentLine = DrawingModel(
        pointList: path,
        color: seletedPenColor,
        width: seletedPenWidth,
      );

      currentLineStreamController.add(currentLine!);
    }
  },

  onScaleEnd: (details) {
    Tool tool = context.read<DrawProvider>().tool;

    // zoom test
    context.read<DrawProvider>().onScaleEnd(details);

    if (tool == Tool.pen) {
      allLines = List.from(allLines)..add(currentLine!);
      linesStreamController.add(allLines);
    }
}

provider.dart, zoom functions

  Offset _offset = Offset.zero;
  Offset _initialFocalPoint = Offset.zero;
  Offset _sessionOffset = Offset.zero; 
  double _scale = 1.0;
  double _initialScale = 1.0;

 void onScaleStart(ScaleStartDetails details) {
    // TODO if use move tool
    // _initialFocalPoint = details.focalPoint;
    _initialScale = _scale;
    notifyListeners();
  }

  void onScaleUpdate(ScaleUpdateDetails details) {
    // TODO if use move tool
    // _sessionOffset = details.focalPoint - _initialFocalPoint;
    _scale = _initialScale * details.scale;
    notifyListeners();
  }

  void onScaleEnd(ScaleEndDetails details) {
    // TODO if use move tool
    // _offset += _sessionOffset;
    _sessionOffset = Offset.zero;

    notifyListeners();
  }

whiteboard screen widget

          Transform.translate(
            offset: _offset + _sessionOffset,
            child: Transform.scale(
              scale: _scale, 
              child: buildAllPaths(allLines: allLines), // drawing screen
            ),
          ),
1 Answers

Use details.pointerCount from onScaleUpdate and onScaleStart in GestureDetector.

Related