flutter web: InteractiveViewer

Question

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 {
  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}')),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}

user_14889635 · Answer

This is a problem flutter is known for because on like native code it doesn't handle size for you, I recommend using a package like sizer from https://pub.dev

SizedBox(
  width: 100.sp.clamp(10,100)
)

Within this example ".sp" is a number (int and double) extension from the sizer package that gives you the size relative to the screen size then adding a ".clamp" makes it that you can have the size within your desired size.

10.sp.clamp(lowestPoint, maxPoint);

user_14889635 · Answer

your this to get the longest side


final double longerSide = 100.w>100.h ? 100.w:100.h;
final double shorterSide = 100.w>100.h ? 100.h:100.w;

/// This builds a box using the lonerSide length and the shortSide length
Widget buildBox({required double lSide, required double sSide}) {
final averageHeight = longerSide / 10;
final averageWidth = shorterSide / 2;
  return Container(width: averageWidth, height: averageHeight, color: Colors.red);
}

flutter web: InteractiveViewer

2 Answers