ChartPanZoomScope class

A drop-in wrapper that adds pan and pinch-zoom to any chart widget.

Built on top of InteractiveViewer so it works with every chart painter without modifying them — the entire child is transformed as a rendered bitmap. Optional floating controls let users zoom in/out and reset the view programmatically, and a TransformationController can be supplied for full external control.

Simple usage

ChartPanZoomScope(
  child: LineChartWidget(dataSets: dataSets),
)

With controls and horizontal-only panning (time-series style)

ChartPanZoomScope(
  minScale: 1.0,
  maxScale: 8.0,
  panAxis: PanAxis.horizontal,
  showControls: true,
  child: LineChartWidget(dataSets: dataSets),
)

With an external controller

final controller = TransformationController();

ElevatedButton(
  onPressed: () => controller.value = Matrix4.identity(),
  child: const Text('Reset'),
);

ChartPanZoomScope(
  controller: controller,
  child: myChart,
);

Inheritance

Constructors

ChartPanZoomScope({Key? key, required Widget child, double minScale = 1.0, double maxScale = 5.0, PanAxis panAxis = PanAxis.free, EdgeInsets boundaryMargin = EdgeInsets.zero, bool constrained = true, TransformationController? controller, bool showControls = false, AlignmentGeometry controlsAlignment = Alignment.bottomRight, EdgeInsetsGeometry controlsPadding = const EdgeInsets.all(8), double zoomStep = 1.5, bool hapticFeedback = true, ValueChanged<ScaleStartDetails>? onInteractionStart, ValueChanged<ScaleEndDetails>? onInteractionEnd}): const

Properties

boundaryMargin → EdgeInsets: Extra space allowed around the child when zoomed. See InteractiveViewer.boundaryMargin.
final
child → Widget: The chart (or any widget) to wrap.
final
constrained → bool: When true (default), the child stays within the viewport. When false, the child can be panned outside the viewport bounds.
final
controller → TransformationController?: Optional transformation controller. Provide one to reset, inspect, or drive the transform from outside this widget.
final
controlsAlignment → AlignmentGeometry: Where the floating controls are placed.
final
controlsPadding → EdgeInsetsGeometry: Padding between the controls and the edge of the chart.
final
hapticFeedback → bool: Whether to fire a light haptic impulse when the control buttons are used.
final
hashCode → int: The hash code for this object.
no setterinherited
key → Key?: Controls how one widget replaces another widget in the tree.
finalinherited
maxScale → double: Maximum zoom factor. Defaults to 5.0.
final
minScale → double: Minimum zoom factor. Defaults to 1.0 (no zoom-out below original size).
final
onInteractionEnd → ValueChanged<ScaleEndDetails>?: Invoked when the user finishes a pan or pinch gesture.
final
onInteractionStart → ValueChanged<ScaleStartDetails>?: Invoked when the user begins a pan or pinch gesture.
final
panAxis → PanAxis: Whether panning is constrained to a single axis. Use PanAxis.horizontal for time-series charts.
final
runtimeType → Type: A representation of the runtime type of the object.
no setterinherited
showControls → bool: When true, renders floating zoom-in / zoom-out / reset buttons over the chart.
final
zoomStep → double: Factor the current scale is multiplied/divided by when the zoom-in / zoom-out buttons are pressed. Defaults to 1.5.
final

Methods

createElement() → StatefulElement: Creates a StatefulElement to manage this widget's location in the tree.
inherited
createState() → State<ChartPanZoomScope>: 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