Image crop or cannot access the horizontal parts of a full screen landscape image

33 Views Asked by At

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

0

There are 0 best solutions below