The InteractiveViewer
widget in Flutter is a widget that can be used to pan and zoom its child. This is useful when you want to display a large image or other content that the user can pan and zoom, similar to the way you would interact with a map.
Here’s an example of using the InteractiveViewer
widget in Flutter:
InteractiveViewer(
child: Image.network('https://example.com/image.jpg'),
boundaryMargin: EdgeInsets.all(20),
minScale: 0.5,
maxScale: 2.0,
)
In this example, the InteractiveViewer
widget is used to wrap an Image
widget loaded from a network. The boundaryMargin
property is set to 20 pixels on all sides, which determines the area outside the child that the user can pan to. The minScale
and maxScale
properties are set to 0.5 and 2.0, respectively, which determine the minimum and maximum zoom levels.
Here are some of the key properties of the InteractiveViewer
widget:
child
: The child widget to wrap in theInteractiveViewer
. This can be any widget, but it’s often anImage
widget.boundaryMargin
: The margin around the child that the user can pan to.minScale
: The minimum scale factor to apply to the child. The default value is 0.1.maxScale
: The maximum scale factor to apply to the child. The default value is 4.0.panEnabled
: A boolean value that determines whether panning is enabled. The default value istrue
.scaleEnabled
: A boolean value that determines whether scaling is enabled. The default value istrue
.onInteractionStart
: A callback that is called when the user starts interacting with theInteractiveViewer
.onInteractionEnd
: A callback that is called when the user stops interacting with theInteractiveViewer
.