Как создать приложение для флаттера, которое могло бы что-то рисовать, а также масштабировать изображение?

Question

Я новичок в флаттере. Я хочу разработать приложение, в котором пользователь мог бы рисовать линии на одном изображении, а также надеяться масштабировать изображение. Это очень похоже на WeChat, когда пользователь выбирает изображение и редактирует его (рисует линию).

Теперь я могу только нацарапать картинку, но не могу ее масштабировать. Вы можете увидеть мой основной код ниже. Я пробовал использовать onScaleUpdate и onPanUpdate из GestureDetector. Однако они не могли работать вместе и дали мне такую ​​ошибку:

Having both a pan gesture recognizer and a scale gesture recognizer is redundant; scale is a superset of pan.

Just use the scale gesture recognizer.

Это мой основной код, я использую виджет стека, помещаю ConstomPaint над изображением:

@override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Container(
          child: Column(
            children: <Widget>[
              Expanded(
                child: Container(
                  color: Colors.white,
                  margin: EdgeInsets.all(12.0),
                  child: RepaintBoundary(
                    key: _repaintKey,
                    child: Stack(
                      alignment: Alignment.center,
                      children: <Widget>[
                        (imageData == null)
                            ? Container()
                            : Image.memory(this.imageData),
                        Positioned(
                          child: _buildCanvas(),
                          top: 0.0,
                          bottom: 0.0,
                          left: 0.0,
                          right: 0.0,
                        ),
                      ],
                    ),
                  ),
                ),
              ),
              _buildBottom(),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildCanvas() {
    return StatefulBuilder(builder: (context, state) {
      return CustomPaint(
        painter: ScrawlPainter(
          points: points,
          strokeColor: selectedColor,
          strokeWidth: strokeWidth,
          isClear: isClear,
        ),
        child: GestureDetector(
          onPanStart: (details) {
            // before painting, set color & strokeWidth.
            isClear = false;
            points[curFrame].color = selectedColor;
            points[curFrame].strokeWidth = strokeWidth;
          },
          onPanUpdate: (details) {
            RenderBox referenceBox = context.findRenderObject();
            Offset localPosition =
                referenceBox.globalToLocal(details.globalPosition);
            state(() {
              points[curFrame].points.add(localPosition);
            });
          },
          onPanEnd: (details) {
            // preparing for next line painting.
            points.add(Point(selectedColor, strokeWidth, []));
            setState(() {
              curFrame++;
            });
          },
        ),
      );
    });
  }

Anything предложение?