flutter web: InteractiveViewer

There are 10 boxes on the Artboard and the screen is big enough, you can see all 10 boxes. On the other hand, if the screen size is small, all 10 boxes are not displayed on the screen.

I tried to move the 10 piece so that I could see the below, some of the boxes were cut off, so it didn't come out

I want to see all 10 boxes even when the screen is small. How do I solve this problem?

class ArtBoard extends StatefulWidget {
  const ArtBoard({Key? key}) : super(key: key);

  @override
  _ArtBoardState createState() => _ArtBoardState();
}

class _ArtBoardState extends State<ArtBoard> {
  TransformationController _transformController = TransformationController();
  double _scale = 1;
  Offset startOffset = Offset.zero;

  @override
  void initState() {
    super.initState();          
  }

  @override
  void dispose() {
    _transformController.dispose();
    super.dispose();
  }

 
  void _handleViewerTransformed() =>
      _scale = _transformController.value.row0[0];

  @override
  Widget build(BuildContext context) {
    RandomColor _randomColor = RandomColor();
    return Scaffold(
      resizeToAvoidBottomInset: false,
      backgroundColor: Colors.transparent,
      body: Stack(
        fit: StackFit.expand,
        children: [
       
          Container(
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height,
            color: Colors.grey.shade500, 
            child: Center(
                child: Text('Design Board',
                    style: TextStyle(fontSize: 8, color: Colors.white70))),
          ),
          
          InteractiveViewer(
            transformationController: _transformController,
            boundaryMargin: EdgeInsets.all(double.infinity),
            constrained: true,
            minScale: 0.1,
            maxScale: 5.0,
            panEnabled: true,
            scaleEnabled: true,
            onInteractionUpdate: (ScaleUpdateDetails details) {
              //_transformationController.value.scale(1);
              //_transformationController.value.scale(details.scale);
              //print('Scale update:$details');
            },
            onInteractionEnd: (ScaleEndDetails details) {
              double correctScaleValue =
                  _transformController.value.getMaxScaleOnAxis();
              // unzoom when interaction has ended
              setState(() {
                print('${_transformController.value}');
                _transformController.toScene(Offset.zero);
              });
            },
            child: ListView.builder(
              physics: NeverScrollableScrollPhysics(),
              shrinkWrap: true,
              itemCount: 10,
              itemBuilder: (BuildContext context, int index) {
                return Align(
                  alignment: Alignment.center,
                  child: Container(
                      alignment: Alignment.center,
                      width: 100,
                      height: 80,
                      color: _randomColor.randomColor(),
                      child: Text('Box :${index}')),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}