InteractiveSvgView class

A widget that renders an SVG asset and exposes interactive regions via InteractiveSelector.

This widget parses the provided SVG asset and renders each region/group as separate layers. Important: do not rely on putting GestureDetector (or other hit-test wrappers) inside interactiveBuilder to receive taps through transparent SVG areas. The flutter_svg renderer does not forward pointer events through transparent pixels, so pointer events will not reliably reach widgets layered beneath the SVG content.

InteractiveSvgView performs its own hit testing and dispatches taps via the onTap callback. Use interactiveBuilder only to decorate or augment region widgets (e.g. add visual highlights, overlays, labels). The builder signature receives (BuildContext, Widget regionWidget, SvgRegionsDetails details).

Notes about SvgRegionsDetails:

  • details.selector: the InteractiveSelector associated with the region.
  • details.bounds: may be null on the initial build because bounds are computed after layout; once computed, they are available here.

If you want interactiveBuilder to be rebuilt after bounds are calculated, set shouldRebuildWhenBoundsCalculated to true so the widget will rebuild and receive updated SvgRegionsDetails with non-null bounds.

Correct usage example:

InteractiveSvgView.fromAssets(
  svgAssets: 'assets/tooth_chart.svg',
  selectors: [InteractiveSelector.byID(id: 'tooth_1', type: InteractiveType.touchable)],
  interactiveBuilder: (context, regionWidget, details) {
    // Decorate the region; do NOT add GestureDetector expecting pointer pass-through.
    return Stack(
      children: [
        regionWidget,
        if (details.bounds != null)
          // show an overlay or label positioned using details.bounds
          Positioned.fromRect(rect: details.bounds!, child: /* overlay */ SizedBox.shrink()),
      ],
    );
  },
  onTap: (selector) => debugPrint('Tapped ${selector.label}'),
)

Parameters:

Inheritance

Constructors

InteractiveSvgView({Key? key, required InteractiveParserDelegate parserDelegate, InteractiveBuilder? interactiveBuilder, ErrorBuilder? errorBuilder, WidgetBuilder? placeholderBuilder, void onTap(InteractiveSelector selector)?, void onTapOutside()?, BoxFit fit = BoxFit.contain, Alignment alignment = Alignment.topLeft, MarkerBuilder? markerBuilder, void onBoundsCalculated(BoundsList boundsData)?, bool shouldRebuildWhenBoundsCalculated = false})
Creates an InteractiveSvgView with the given parserDelegate.
const
InteractiveSvgView.fromAssets({Key? key, required String svgAssets, Iterable<InteractiveSelector> selectors = const [], ErrorBuilder? errorBuilder, WidgetBuilder? placeholderBuilder, InteractiveBuilder? interactiveBuilder, void onTap(InteractiveSelector selector)?, void onTapOutside()?, BoxFit fit = BoxFit.contain, Alignment alignment = Alignment.topLeft, MarkerBuilder? markerBuilder, void onBoundsCalculated(BoundsList boundsData)?, bool shouldRebuildWhenBoundsCalculated = false})
Creates an InteractiveSvgView that loads an SVG asset from svgAssets.
factory

Properties

alignment → Alignment
Alignment used when rendering the SVG content.
final
errorBuilder → ErrorBuilder?
Optional custom error builder. Receives (context, error, stackTrace).
final
fit → BoxFit
How the SVG content should be inscribed into the available space.
final
hashCode → int
The hash code for this object.
no setterinherited
interactiveBuilder → InteractiveBuilder?
Optional builder for wrapping each region widget. Useful for adding gestures or overlays.
final
key → Key?
Controls how one widget replaces another widget in the tree.
finalinherited
markerBuilder → MarkerBuilder?
Optional marker builder: used to overlay markers or additional widgets on top of the SVG.
final
onBoundsCalculated → void Function(BoundsList boundsData)?
Callback invoked when bounds for touchable regions are calculated.
final
onTap → void Function(InteractiveSelector selector)?
Optional callback invoked when a touchable InteractiveSelector is tapped.
final
onTapOutside → void Function()?
Optional callback invoked when a tap occurs outside any touchable region.
final
parserDelegate → InteractiveParserDelegate
Parser delegate responsible for loading/parsing the SVG and providing regions.
final
placeholderBuilder → WidgetBuilder?
Optional placeholder builder shown while loading.
final
runtimeType → Type
A representation of the runtime type of the object.
no setterinherited
shouldRebuildWhenBoundsCalculated → bool
When true, the widget will trigger a rebuild after bounds are calculated.
final

Methods

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