InteractiveViewer (Flutter Widget of the Week)

Flutter · 176K views · 2020 · 1:13

Open on YouTube

Software (other)UX & UI designtutorial

Why Stack Overflow recommends it

Stack Overflow users link it when answering Flutter questions about adding zoom, pan or large scrollable canvases to images and other widgets.

Recommended by 3 people across 3 different months, 2021 to 2022.

What it is

A 73-second entry in the Flutter team's Widget of the Week series covering InteractiveViewer, a widget that lets users pan and zoom its child. It briefly shows how to constrain, limit and customize those gestures for content too large for a phone screen.

What people said

Recommends Bruno Kinast · 2021-10 · Stack Overflow · on “How to add zoom in an image?”

You can try wrapping your image in the InteractiveViewer [LINK] widget, like this: InteractiveViewer( child: CachedNetworkImage( imageUrl: '${this.url}', ), ), This widget provides pan and zoom interactions with its child, check out the Flutter's Widget of the Week video about it here [this video] . Please note that to use CachedNetworkImage you need to have the cached_network_image [LINK] plugin installed in you Flutter project. If you don't have it installed, you can use the Image.network [LINK] widget: InteractiveViewer( child: Image.network( '${this.url}', ), ),

Recommends Tor-Martin Holen · 2022-01 · Stack Overflow · on “Flutter create infinite screen”

The InteractiveViewer widget One solution could be using the InteractiveViewer widget with its constrained property set to false as it will out of the box support: Drag and translate Zooming in and out - Simply set minScale and maxScale Clicking and pressing widgets like normal InteractiveViewer as featured on Flutter Widget of the Week : [this video] Infinite size Regarding the question's infinite size part, a maximum size for the child widget must be specified, however this can be very large , so large that it is actually hard to re-find widgets in the center of the screen. Alignment of the child content By default the child content will start from the top left, and panning will show content ou

Recommends Mohammed Alfateh · 2022-04 · Stack Overflow · on “Animating specific location on an image”

Your solution "stack with images" is good enough, you just need to wrap the `Stack` with `InteractiveViewer`, more on `InteractiveViewer` video [this video]