此InteractiveViewer小部件可以解决您的问题。

class MyBoard extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Center(
          child: InteractiveViewer(
            boundaryMargin: EdgeInsets.all(20.0),
            minScale: 0.1,
            maxScale: 1.6,
            child: Container(
              width: 20 * tileSize, //calculate the size based on your board size
              height: 20 * tileSize,
              decoration: BoxDecoration(
                border: Border.all(color: Colors.black),
              ),
              child: GridView.builder(
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 20,
                ),
                itemBuilder: (context, index) {
                  // Build your grid items here
                  return Container(
                    color: Colors.blue, // Customize as needed
                  );
                },
              ),
            ),
          ),
        );
      }
    
      // Adjust the tileSize based on your needs
      static const double tileSize = 40.0;
    }

or use this page 
check this video too:

字符串

https://pub.dev/packages/widget_zoomhttps://github-production-user-asset-6210df.s3.amazonaws.com/58891556/274191760-3f1641d7-3408-4641-8776-0ca842e1d1d7.mp4?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAIWNJYAX4CSVEH53A%2F20231129%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20231129T073620Z&X-Amz-Expires=300&X-Amz-Signature=6ba3116dbb606cc070d21fa2fb149c3996801adf084d882685ba6aa5054d02d2&X-Amz-SignedHeaders=host&actor_id=42842462&key_id=0&repo_id=394961509

我想你要找的是InteractiveViewer

class InteractiveViewerExample extends StatelessWidget {
  const InteractiveViewerExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: InteractiveViewer(
        boundaryMargin: const EdgeInsets.all(20.0),
        minScale: 0.1,
        maxScale: 1.6,
        child: Container(
          decoration: const BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              colors: <Color>[Colors.orange, Colors.red],
              stops: <double>[0.0, 1.0],
            ),
          ),
        ),
      ),
    );
  }
}

字符串