[Question] How do I find the current zoom level of an InteractiveViewer?

[arthur-tacca]

Question

How do I find the current zoom level of an InteractiveViewer? Ideally, also I'd like to know to know the current pan (displacement).

For context: I'm using this for a Canvas which contains some elements that I want to be scale invariant e.g. some border widths and some text labels. I plan to set their size to 1/(current zoom) when the zoom changes – they'll scale wrong momentarily but then "pop" back to their correct size, which I think will look ok. I know I could use a GestureDetector to handle pan/zoom but it would be hard to rebuild all the functionality myself (especially momentum when panning), and doing it on the Python side will be much laggier than InteractiveViewer which is a native Dart control.

Here are some ideas I've thought about:

• It doesn't seem to be available as a property or method, like it is on the Flutter side where you can just access the Matrix4 of the transformation.
• There are save_state() / restore_state() methods, but unfortunately they just save/load the transformation in a private variable, and it happens on the Flutter/Dart side so it really is inaccessible. (It's a bit of a missed opportunity as, aside from not helping here, it's also less flexible and more bug prone for its intended purpose than just exposing the transformation).
• There's some information in the event handlers . This is maybe the most promising route, but I'm not sure how to piece the information together into the current zoom level.
• Maybe I could hackily figure it out by putting a hidden control in a Stack inside it and comparing its actual position and size to its original one? But I don't know enough about Fleet to know if that's feasible.

Does anyone know how to do this? Thanks!

Code sample

No response

Error message

No response

------------------------------------------------------

• I have searched for answers to my question both in the issues and in previous discussions.

[arthur-tacca]

I fixed this by implementing a custom user extension that supplies the control. Then I could write whatever code I wanted on the Flutter / Dart side.

The original plan was to just wrap the Flutter InteractiveViewer, like the Flet InteractiveViewer does, but add the event I wanted so I could call the callback on the Python side.

But actually, I came up with a better overall solution. As I said above, I wanted the zoom callback to do a specific thing: to counterscale some elements of a Flet Canvas so they stayed constant while the overall image zoomed in or out, accepting a slight delay would cause graphical glitches (the line thickness etc. would briefly change before popping back to their original size). But I realised I could copy the whole Flet Canvas control on the Flutter side inside my custom control, and apply the counterscaling there without going through the Python, so it happens instantly. Now I have a zoomable canvas like I wanted with some scale-invariant elements and it all happens smoothly with no graphical artefacts.

I think Flet has potential to be a bit of a gateway drug to pure Flutter. My custom control currently reuses the Flet Canvas interface but it's tempting to re-express it in terms of my application's abstract model and move the business logic (e.g. "this thing looks like a red oval") to the Flutter side.