InteractiveViewerPlus class

InteractiveViewerPlus is a drop in replacement and enhanced version of Flutter's InteractiveViewer that adds support for pan, zoom, and rotation, flip and improved programmatic control through InteractiveViewerPlusController.

Programmatic Control

Use InteractiveViewerPlusController for programmatic manipulation:

final controller = InteractiveViewerPlusController();

InteractiveViewerPlus(
  controller: controller,
  child: MyWidget(),
)

controller.zoom(1.5);  // Zoom in by 50%
controller.rotate(math.pi / 4);  // Rotate 45 degrees
controller.flip(flipX: true);  // Flip horizontally

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.

{@tool dartpad} This example shows a simple Container that can be panned and zoomed.

** See code in examples/api/lib/widgets/interactive_viewer/interactive_viewer.0.dart ** {@end-tool}

Inheritance

• Object
• DiagnosticableTree
• Widget
• StatefulWidget
• InteractiveViewerPlus

Annotations

• @immutable

Constructors

InteractiveViewerPlus({required Widget child, Key? key, Alignment? alignment, InteractiveViewerPlusController? controller, GestureScaleEndCallback? onInteractionEnd, GestureScaleStartCallback? onInteractionStart, GestureScaleUpdateCallback? onInteractionUpdate, double minScale = 0.8, double maxScale = 2.5, bool panEnabled = true, bool scaleEnabled = true, bool rotateEnabled = true, bool constrained = true, PanAxis panAxis = PanAxis.free, Clip clipBehavior = Clip.hardEdge, EdgeInsets boundaryMargin = EdgeInsets.zero, bool trackpadScrollCausesScale = false, double interactionEndFrictionCoefficient = _kDrag, double scaleFactor = kDefaultMouseScrollToScaleFactor})

Creates an InteractiveViewerPlus.

InteractiveViewerPlus.builder({required InteractiveViewerWidgetBuilder builder, Key? key, Alignment? alignment, InteractiveViewerPlusController? controller, GestureScaleEndCallback? onInteractionEnd, GestureScaleStartCallback? onInteractionStart, GestureScaleUpdateCallback? onInteractionUpdate, double minScale = 0.8, double maxScale = 2.5, bool panEnabled = true, bool scaleEnabled = true, bool rotateEnabled = true, PanAxis panAxis = PanAxis.free, Clip clipBehavior = Clip.hardEdge, EdgeInsets boundaryMargin = EdgeInsets.zero, bool trackpadScrollCausesScale = false, double interactionEndFrictionCoefficient = _kDrag, double scaleFactor = kDefaultMouseScrollToScaleFactor})

Creates an InteractiveViewerPlus 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 InteractiveViewerPlus.

final

clipBehavior → Clip

If set to Clip.none, the child may extend beyond the size of the InteractiveViewerPlus, 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 child should be constrained to the viewport size.

final

controller → InteractiveViewerPlusController?

A InteractiveViewerPlusController for the transformation performed on the child.

final

hashCode → int

The hash code for this object.

no setter, inherited

interactionEndFrictionCoefficient → double

The friction coefficient for momentum animations after user interaction ends.

final

key → Key?

Controls how one widget replaces another widget in the tree.

final, inherited

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

Whether pan gestures are enabled.

final

rotateEnabled → bool

Whether rotation gestures are enabled.

final

runtimeType → Type

A representation of the runtime type of the object.

no setter, inherited

scaleEnabled → bool

Whether zoom gestures are enabled.

final

scaleFactor → double

Determines the amount of scale to be performed per pointer scroll.

final

trackpadScrollCausesScale → bool

Whether trackpad scroll events should cause scaling instead of panning.

final

Methods

createElement() → StatefulElement

Creates a StatefulElement to manage this widget's location in the tree.

inherited

createState() → State<InteractiveViewerPlus>

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