Flutter InteractiveViewer Widget

CodeWithFlutter
2 Min Read

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 the InteractiveViewer. This can be any widget, but it’s often an Image 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 is true.
  • scaleEnabled: A boolean value that determines whether scaling is enabled. The default value is true.
  • onInteractionStart: A callback that is called when the user starts interacting with the InteractiveViewer.
  • onInteractionEnd: A callback that is called when the user stops interacting with the InteractiveViewer.
Share this Article
Leave a comment