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( 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.