I am trying to open an image in full screen, so the landscape image would be full screen like portrait. Then I can manipulate an image - zoom it, drag it, and save the desired scale and offset. The problem is that I am using a boxfit.cover, which I think crops the horizontal parts of an image, so I cannot access these horizontal parts through dragging(panning) the initial state of an image when I opened it. Everything works perfectly when I zoom it - I can then drag it and successfully save the desired position of a zoomed image. Please help, I am struggling for a weeks now. And most importantly I need to save the offset for those horizontal parts, I do not need just to see them.
I tried this version of code
void _onScaleStart(ScaleStartDetails details) {
initialFocalPoint = details.focalPoint;
previousScale = scale;
isZooming = true;
}
void _onScaleUpdate(ScaleUpdateDetails details) {
setState(() {
scale = previousScale * details.scale;
Offset deltaOffset = details.focalPoint - initialFocalPoint;
offset = clampOffset(deltaOffset / scale + offset);
});
}
Offset clampOffset(Offset offset) {
final x = offset.dx;
final y = offset.dy;
final screenWidth = MediaQuery.of(context).size.width;
final screenHeight = MediaQuery.of(context).size.height;
final maxX = math.max(0, (screenWidth \* scale - screenWidth) / 2).toDouble();
final maxY = math.max(0, (screenHeight \* scale - screenHeight) / 2).toDouble();
return Offset(x.clamp(-maxX, maxX), y.clamp(-maxY, maxY));
}
void _onScaleEnd(ScaleEndDetails details) {
isZooming = false;
}
void _onDoubleTap() {
if (isZooming) return;
setState(() {
if (isZoomed) {
scale = 1;
offset = Offset.zero;
isZoomed = false;
} else {
scale = doubleTapScale;
offset = Offset.zero;
isZoomed = true;
}
});
}
Container(
width: double.infinity,
height: double.infinity,
child: GestureDetector(
onScaleStart: _onScaleStart,
onScaleUpdate: _onScaleUpdate,
onScaleEnd: _onScaleEnd,
onDoubleTap:_onDoubleTap,
child: Transform(
alignment: Alignment.center,
transform: Matrix4.identity()
..translate(offset.dx, offset.dy)
..scale(scale),
child: Image.file(
File(selectedImagePath!),
fit: BoxFit.cover, // Adjust the fit to cover the screen
),
),
But unfortunately I cannot pan initial image since the boxfit.cover crops my image, if I am not mistaken