flutter web: InteractiveViewer - flutter

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

Answer 1

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);

Answer 2

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);
}