Snap to Bar

The SnapToBarConfig lets you customize how interactions outside the boundaries of a bar are evaluated.

Snap To Height

If snapToHeight is enabled, any interaction above the bar will be considered as an interaction on that bar.

For example, here the interaction point above the bar will trigger an interaction event on the highlighted bar.

Snap To Width

If snapToWidth is enabled, an interaction horizontally outside the bar will trigger an interaction on that bar. The behaviour of which bar is selected when snapping horizontally is controlled by SnapToBarBehaviour.

For example, here the interaction point to the left of the bar will trigger an interaction event on the highlighted bar.

If both snapToWidth and snapToHeight is enabled, the interactions will snap and find a matching bar in both directions.

Snapping can be enabled per interaction type or for all interaction types together.

By Interaction Type

BarInteractionEvents(
    ...
    snapToBarConfig: SnapToBarConfig(
      snapToHeightOnTap: true,
      snapToWidthOnTap: true,
      snapToHeightOnDrag: false,
      snapToWidthOnDrag: true
    ),
    ...
)

For All Interaction Types

BarInteractionEvents(
    ...
    snapToBarConfig: SnapToBarConfig.forAll(
        snapToWidth: true,
        snapToHeight: false,
    ),
    ...
)

Snap To Bar Behaviour

SnapToBarBehaviour is an enum that controls how an interaction outside the boundaries of a bar is evaluated.

BarInteractionEvents(
    ...
    snapToBarConfig: SnapToBarConfig(
      ...
      snapToBarBehaviour: SnapToBarBehaviour.snapToSection
    ),
    ...
)

snapToNearest

snapToNearest finds the nearest bar to the interaction point and triggers an interaction event for that bar.

For example, here the highlighted bar is nearest by width to the interaction point, and an interaction event will be triggered for the highlighted bar.

snapToSection

snapToSection find the bar in the section of the grid where the interaction happened and triggers an interaction for that bar.

There is one exception to this case. If the interaction point is in between 2 bars of the same group, then the interaction will be triggered for the nearest bar in that group.

For example, here an interaction event will be triggered for the first bar as it belongs to the section of the grid where the interaction happened, event if the bar from group 2 is the closer bar.