Flutter Interactive Viewer display zoom out version of the image

user_3637820 0
Viewed 4885

so I tried to implement the Interactive widget, the scroll, zoom in & out works fine. but while initial render I am facing a hiccup, it displays the zoomed-in image. what I want to oom out so the entire image is visible & the user can interact. here is my code. a little bit of googling tells me we can achieve the same with matrix4 identity or toScene method, & that is little beyond my skill set, can someone help here?

InteractiveViewer(
  transformationController: mapController,
  minScale: 0.1,
  maxScale: 1.5,
  constrained: false,
  // scaleEnabled: false,
  child: Image.network(
      'https://images.unsplash.com/photo-1502920514313-52581002a659'),
)

here is zoomed in an image which displays on the initial render and what I want is 1st option where I can see at least some portion of the image for it to make sense to the user. https://ibb.co/HYnZBvG (Desired result) https://ibb.co/xg0nxnH (actual result)

dart flutter
1 Answers

Its because you did'nt gave any fit arguments to Image Widget just give BoxFit.fitWidth to render image with respect to Width or BoxFit.fitHeight to render image with respect to height and try setting constraints to true

InteractiveViewer(
  transformationController: mapController,
  minScale: 0.1,
  maxScale: 1.5,
  constrained: false,
  // scaleEnabled: false,
   child: Image.network(
   'https://images.unsplash.com/photo- 
    15029205143152581002a659',fit:BoxFit.fitWidth,
    ),
)
user_121686110
Related