Flutter Web adding mouse scroll to Canvas

I am studying flutter and trying to add mouse scroll control to the canvas editor (like a simple image editor)

The current code used the GestureDetector for pan and image movement. But UX is quite difficult when the large-sized image is loaded. So trying to add mouse scroll. I've tried the Listview and SingleChildScrollView but it does not work using physics or scroll direction. I've seen the examples using Listener. Still having trouble implementing them(I am just an intermediate-level programmer). Please guide me~! I didn't write the Original code, I am trying to use studying and making my own work.

Here is the current code.

 @override
  Widget build(BuildContext context) {
    //FocusScope.of(context).requestFocus(_focusNode);
    var paintInfo = PaintManager.instance.currentPaintInfo;

    paintInfo.canvasRect.setOuterSize(
        (MediaQuery.of(context).size.width - 350) * 0.5 - 2,
        MediaQuery.of(context).size.height - 50 - 2);

    paintInfo.preBuild();

    return GestureDetector(
      onPanDown: onPanDown,
      onPanUpdate: onPanUpdate,
      onPanEnd: onPanEnd,
      child: Container(
        width: paintInfo.canvasRect.outerWidth,
        height: paintInfo.canvasRect.outerHeight,
        color: Color.fromRGBO(20, 20, 20, 1),
        margin: EdgeInsets.all(1),
        child: Stack(
          children: [
            Positioned(
              left: paintInfo.canvasRect.offsetX,
              top: paintInfo.canvasRect.offsetY,
              width: paintInfo.canvasRect.displayWidth,
              height: paintInfo.canvasRect.displayHeight,
              child: CustomPaint(
                painter: CanvasRenderer(
                    points: points,
                    isEditor: widget.isEditor,
                    isNoScale: false),
              ),
            ),

          ],
        ),
      ),
    );