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 clips its child using Clip.hardEdge. To prevent this behavior, consider setting clipBehavior to Clip.none. When clipBehavior is Clip.none, 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 dead areas where InteractiveViewer does not receive gestures, don't set clipBehavior or be sure that the InteractiveViewer widget is the size of the area that should be interactive.
See also:
- The Flutter Gallery's transformations demo, which includes the use of InteractiveViewer.
- The flutter-go demo, which includes robust positioning of an InteractiveViewer child that works for all screen sizes and child sizes.
- The Lazy Flutter Performance Session, which includes the use of an InteractiveViewer to performantly view subsets of a large set of widgets using the builder constructor.
To create a local project with this code sample, run:
flutter create --sample=widgets.InteractiveViewer.1 mysample
- Inheritance
-
- Object
- DiagnosticableTree
- Widget
- StatefulWidget
- InteractiveViewer
- Annotations
Constructors
- InteractiveViewer({Key? key, Clip clipBehavior = Clip.hardEdge, PanAxis panAxis = PanAxis.free, EdgeInsets boundaryMargin = EdgeInsets.zero, bool constrained = true, double maxScale = 2.5, double minScale = 0.8, double interactionEndFrictionCoefficient = _kDrag, GestureScaleEndCallback? onInteractionEnd, GestureScaleStartCallback? onInteractionStart, GestureScaleUpdateCallback? onInteractionUpdate, bool panEnabled = true, bool scaleEnabled = true, double scaleFactor = kDefaultMouseScrollToScaleFactor, TransformationController? transformationController, Alignment? alignment, bool trackpadScrollCausesScale = false, required Widget child})
- Create an InteractiveViewer.
- InteractiveViewer.builder({Key? key, Clip clipBehavior = Clip.hardEdge, PanAxis panAxis = PanAxis.free, EdgeInsets boundaryMargin = EdgeInsets.zero, double maxScale = 2.5, double minScale = 0.8, double interactionEndFrictionCoefficient = _kDrag, GestureScaleEndCallback? onInteractionEnd, GestureScaleStartCallback? onInteractionStart, GestureScaleUpdateCallback? onInteractionUpdate, bool panEnabled = true, bool scaleEnabled = true, double scaleFactor = 200.0, TransformationController? transformationController, Alignment? alignment, bool trackpadScrollCausesScale = false, required InteractiveViewerWidgetBuilder builder})
- Creates an InteractiveViewer for a child that is created on demand.
Properties
- alignment → Alignment?
-
The alignment of the child's origin, relative to the size of the box.
final
- boundaryMargin → EdgeInsets
-
A margin for the visible boundaries of the child.
final
- builder → InteractiveViewerWidgetBuilder?
-
Builds the child of this widget.
final
- child → Widget?
-
The child Widget that is transformed by InteractiveViewer.
final
- clipBehavior → Clip
-
If set to Clip.none, the child may extend beyond the size of the InteractiveViewer,
but it will not receive gestures in these areas.
Be sure that the InteractiveViewer is the desired size when using Clip.none.
final
- constrained → bool
-
Whether the normal size constraints at this point in the widget tree are
applied to the child.
final
- hashCode → int
-
The hash code for this object.
no setterinherited
- interactionEndFrictionCoefficient → double
-
Changes the deceleration behavior after a gesture.
final
- key → Key?
-
Controls how one widget replaces another widget in the tree.
finalinherited
- maxScale → double
-
The maximum allowed scale.
final
- minScale → double
-
The minimum allowed scale.
final
- onInteractionEnd → GestureScaleEndCallback?
-
Called when the user ends a pan or scale gesture on the widget.
final
- onInteractionStart → GestureScaleStartCallback?
-
Called when the user begins a pan or scale gesture on the widget.
final
- onInteractionUpdate → GestureScaleUpdateCallback?
-
Called when the user updates a pan or scale gesture on the widget.
final
- panAxis → PanAxis
-
When set to PanAxis.aligned, panning is only allowed in the horizontal
axis or the vertical axis, diagonal panning is not allowed.
final
- panEnabled → bool
-
If false, the user will be prevented from panning.
final
- runtimeType → Type
-
A representation of the runtime type of the object.
no setterinherited
- scaleEnabled → bool
-
If false, the user will be prevented from scaling.
final
- scaleFactor → double
-
Determines the amount of scale to be performed per pointer scroll.
final
- trackpadScrollCausesScale → bool
-
Whether scrolling up/down on a trackpad should cause scaling instead of
panning.
final
- transformationController → TransformationController?
-
A TransformationController for the transformation performed on the
child.
final
Methods
-
createElement(
) → StatefulElement -
Creates a StatefulElement to manage this widget's location in the tree.
inherited
-
createState(
) → State< InteractiveViewer> -
Creates the mutable state for this widget at a given location in the tree.
override
-
debugDescribeChildren(
) → List< DiagnosticsNode> -
Returns a list of DiagnosticsNode objects describing this node's
children.
inherited
-
debugFillProperties(
DiagnosticPropertiesBuilder properties) → void -
Add additional properties associated with the node.
inherited
-
noSuchMethod(
Invocation invocation) → dynamic -
Invoked when a nonexistent method or property is accessed.
inherited
-
toDiagnosticsNode(
{String? name, DiagnosticsTreeStyle? style}) → DiagnosticsNode -
Returns a debug representation of the object that is used by debugging
tools and by DiagnosticsNode.toStringDeep.
inherited
-
toString(
{DiagnosticLevel minLevel = DiagnosticLevel.info}) → String -
A string representation of this object.
inherited
-
toStringDeep(
{String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug, int wrapWidth = 65}) → String -
Returns a string representation of this node and its descendants.
inherited
-
toStringShallow(
{String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String -
Returns a one-line detailed description of the object.
inherited
-
toStringShort(
) → String -
A short, textual description of this widget.
inherited
Operators
-
operator ==(
Object other) → bool -
The equality operator.
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 https://math.stackexchange.com/a/190373.