You must have came across a use case where a widget can be of bigger size than the device size. Or you wanted an image of a bigger size to fit into screen, and user can zoom-in or zoom-out to see the details of the image. Or case where you wanted to drag-drop a widget.

Flutter gives this functionality in-built using InteractiveViewer widget. It enables drag-drop and zoom interactions with its child. The child widget can be dragged, zoomed in and out. This gives a way to view something in detail on smaller mobile devices.

Example:

InteractiveViewer(
  constrained: false,
  child: Image.asset('some big sized image'),
  boundaryMargin: EdgeInsets.all(20),
  onInteractionStart: (_) => _handleInteractionStart,
)

It gives following configuration options:

• boundaryMargin: Using this you can set the margin for the child widget.
• constrained: If set to false, the child widget will be given infinite constraints. This is useful when child should be bigger.
• scaleEnabled: If set to false, user will be prevented from scaling the child widget.
• maxScale: This defines the maximum allowed scale. It represents how much you can stretch an image. It’s default value is 2.5.
• minScale: This defines the minimum allowed scale. It represents how much you can squeeze an image. It’s default value is 0.8.
• onInteractionStart: This callback allows you to define a functionality, when the user begins to pan or scale gesture on the child widget.
• onInteractionEnd: This callback allows you to define a functionality, when the user ends to pan or scale gesture on the child widget.

You can view the quick demo on github.