Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to set InteractiveViewer initial zoom level

I am using InteractiveViewer to display a video. It is working properly. But I want set initial zoom level.

Is there a way to do this?

return InteractiveViewer(
  minScale: 1,
  maxScale: 4,
  constrained: false,
  child: Container(
    color: Colors.red,
    width: 320,
    height: 180,
    child: widget.remoteVideoRenderer(),
  ),
);
like image 867
Janaka Avatar asked Jun 07 '26 22:06

Janaka


1 Answers

I was able to do this, with varying levels of success, like so (credit to @pskink for pointing me in the right direction):

  final viewTransformationController = TransformationController();

  @override
  void initState() {
    final zoomFactor = 2.0;
    final xTranslate = 300.0;
    final yTranslate = 300.0;
    viewTransformationController.value.setEntry(0, 0, zoomFactor);
    viewTransformationController.value.setEntry(1, 1, zoomFactor);
    viewTransformationController.value.setEntry(2, 2, zoomFactor);
    viewTransformationController.value.setEntry(0, 3, -xTranslate);
    viewTransformationController.value.setEntry(1, 3, -yTranslate);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return InteractiveViewer(
              transformationController: viewTransformationController,
              minScale: 0.1,
              maxScale: 6,
              child: // ....
    );
  }

viewTransformationController.value is a 4x4 matrix that is applied to the view, it encodes the translations/rotations/scaling. The representation of these transformations in the matrix is probably documented somewhere (and/or just standard from projective/affine geometry), but I couldn't find them, so I just printed them out while zooming/panning until the roles of each entry became clear.

If you just set the zoom factor to 2 and don't translate, you'll be zoomed-in on the top-left corner of the widget.

Note that you cannot access the windows dimensions in the initState() method using MediaQuery.of(context), which is somewhat inconvenient if you want to e.g. zoom in on the middle of the window. I haven't found a good way to do that yet.

like image 118
Amos Joshua Avatar answered Jun 10 '26 17:06

Amos Joshua



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!