InteractiveViewer class

A widget that enables pan and zoom interactions with its child.

The user can transform the child by dragging to pan or pinching to zoom.

By default, InteractiveViewer may draw outside of its original area of the screen, such as when a child is zoomed in and increases in size. However, it will not receive gestures outside of its original area. To prevent InteractiveViewer from drawing outside of its original size, wrap it in a ClipRect. Or, to prevent dead areas where InteractiveViewer does not receive gestures, be sure that the InteractiveViewer widget is the size of the area that should be interactive. See flutter-go for an example of robust positioning of an InteractiveViewer child that works for all screen sizes and child sizes.

The child must not be null.

See also:

This example shows a simple Container that can be panned and zoomed.
To create a local project with this code sample, run:
flutter create --sample=widgets.InteractiveViewer.1 mysample

  • @immutable


InteractiveViewer({Key key, bool alignPanAxis: false, EdgeInsets boundaryMargin:, bool constrained: true, double maxScale: 2.5, double minScale: 0.8, void onInteractionEnd(ScaleEndDetails details), void onInteractionStart(ScaleStartDetails details), void onInteractionUpdate(ScaleUpdateDetails details), bool panEnabled: true, bool scaleEnabled: true, TransformationController transformationController, @required Widget child})
Create an InteractiveViewer. [...]


alignPanAxis bool
If true, panning is only allowed in the direction of the horizontal axis or the vertical axis. [...]
boundaryMargin EdgeInsets
A margin for the visible boundaries of the child. [...]
child Widget
The Widget to perform the transformations on. [...]
constrained bool
Whether the normal size constraints at this point in the widget tree are applied to the child. [...]
hashCode int
The hash code for this object. [...]
@nonVirtual, read-only, inherited
key Key
Controls how one widget replaces another widget in the tree. [...]
final, inherited
maxScale double
The maximum allowed scale. [...]
minScale double
The minimum allowed scale. [...]
onInteractionEnd → void Function(ScaleEndDetails details)
Called when the user ends a pan or scale gesture on the widget. [...]
onInteractionStart → void Function(ScaleStartDetails details)
Called when the user begins a pan or scale gesture on the widget. [...]
onInteractionUpdate → void Function(ScaleUpdateDetails details)
Called when the user updates a pan or scale gesture on the widget. [...]
panEnabled bool
If false, the user will be prevented from panning. [...]
runtimeType Type
A representation of the runtime type of the object.
read-only, inherited
scaleEnabled bool
If false, the user will be prevented from scaling. [...]
transformationController TransformationController
A TransformationController for the transformation performed on the child. [...]


createElement() StatefulElement
Creates a StatefulElement to manage this widget's location in the tree. [...]
createState() → _InteractiveViewerState
Creates the mutable state for this widget at a given location in the tree. [...]
debugDescribeChildren() List<DiagnosticsNode>
Returns a list of DiagnosticsNode objects describing this node's children. [...]
@protected, inherited
debugFillProperties(DiagnosticPropertiesBuilder properties) → void
Add additional properties associated with the node. [...]
noSuchMethod(Invocation invocation) → dynamic
Invoked when a non-existent method or property is accessed. [...]
toDiagnosticsNode({String name, DiagnosticsTreeStyle style}) DiagnosticsNode
Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep. [...]
toString({DiagnosticLevel minLevel:}) String
Returns a string representation of this object.
toStringDeep({String prefixLineOne: '', String prefixOtherLines, DiagnosticLevel minLevel: DiagnosticLevel.debug}) String
Returns a string representation of this node and its descendants. [...]
toStringShallow({String joiner: ', ', DiagnosticLevel minLevel: DiagnosticLevel.debug}) String
Returns a one-line detailed description of the object. [...]
toStringShort() String
A short, textual description of this widget.


operator ==(Object other) bool
The equality operator. [...]
@nonVirtual, inherited

Static Methods

getAxisAlignedBoundingBox(Quad quad) Quad
Given a quad, return its axis aligned bounding box.
getNearestPointInside(Vector3 point, Quad quad) Vector3
Get the point inside (inclusively) the given Quad that is nearest to the given Vector3.
getNearestPointOnLine(Vector3 point, Vector3 l1, Vector3 l2) Vector3
Returns the closest point to the given point on the given line segment.
pointIsInside(Vector3 point, Quad quad) bool
Returns true iff the point is inside the rectangle given by the Quad, inclusively. Algorithm from