How to use InteractiveViewer to adjust position and scale? - flutter

Question

In my application, I am showing a video on the screen.
When application starts, it show full screen of the video, overlay with some information about the video.
This screen is called glass screen.
When the user click a button 3/4 of the screen is adjusted to show the video and bottom part show some other information.
The screen height adjustment is done with "Expanded" flex set to 3/4, by the parent widget and it is working fine.
In both cases the video must fill the height of the screen and user can zoom and pan to see parts outside the screen. I am using "InteractiveViewer" for that.
"WidgetSize" allow me to get the size of the area a Widget occupies.
I have several factors to consider area size video going to display and size of the video
I need to maintain the aspect ratio of the video.
When the glass door is closed, it seems the video is displaying correctly.
But when it is closed (3/4 area) I can't figure out how to find out the correct scale for the video and how to adjust the position of it with "InteractiveViewer".
This is just a test to figure out how to use it
_viewTransformationController.value.setIdentity();
_viewTransformationController.value.setEntry(0, 0, 2);
_viewTransformationController.value.setEntry(1, 1, 2);
_viewTransformationController.value.setEntry(2, 2, 2);
_viewTransformationController.value.setEntry(1, 3, -75);
zoom level 2 is not correct value. -75 is to adjust the Y position (not really sure about this)
Following is the full code.
ScaleVideoController _scaleController;
final _viewTransformationController =
TransformationController(Matrix4.identity());
#override
void initState() {
super.initState();
_scaleController = widget.controller;
this._scaleController.videoSizeChanged = (double width, double height) {
this._videoSize = Size(width, height);
this._updateScale();
};
this._scaleController.glassDoorOpenTriggered = () {
this._glassDoorClosed = false;
this._updateScale();
};
}
_updateScale() {
final physicalScreenSize = window.physicalSize;
if (this._glassDoorClosed) {
this._displayVideoHeight = this._areaSize.height;
this._displayVideoWidth =
this._areaSize.width * this._displayVideoHeight / _areaSize.height;
this._scale = physicalScreenSize.height / this._displayVideoHeight;
} else {
_viewTransformationController.value.setIdentity();
_viewTransformationController.value.setEntry(0, 0, 2);
_viewTransformationController.value.setEntry(1, 1, 2);
_viewTransformationController.value.setEntry(2, 2, 2);
_viewTransformationController.value.setEntry(1, 3, -75);
}
setState(() {});
}
Widget _buildScaledRemoteVideo() {
return WidgetSize(
onChange: (Size s) {
this._areaSize = s;
this._updateScale();
},
child: InteractiveViewer(
transformationController: _viewTransformationController,
scaleEnabled: !_glassDoorClosed,
minScale: 0.1,
constrained: false,
child: Transform.scale(
scale: _glassDoorClosed ? _scale : 1,
child: Container(
width: this._displayVideoWidth,
height: this._displayVideoHeight,
child: widget.remoteVideoRenderer(),
),
),
),
);
}
This is how it should look like,
The read area is the video..
Can anyone provide some advice on how to adjust the screen when it