Flutter InteractiveViewer

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.

InteractiveViewer

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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s