node_flow library

NodeFlow — a React-Flow-equivalent node canvas for Flutter.

The canvas is domain-agnostic: node visuals come from the app through a nodeBuilder, node data is generic, and serialization stays with the caller. Rendering is layered (grid, edges, nodes, overlays) with Flutter-native (ChangeNotifier/ValueNotifier) state.

Classes

AlignmentSnapResult
The outcome of alignment detection for one drag step: the (possibly snap-adjusted) delta to apply and the guides to paint.
CubicSegment
A cubic bezier curve segment.
EdgeGeometry
The computed geometry of one edge: the start point plus the ordered segments that reach the target. Derive the drawable Path and hit-test rectangles from the same segments so painting and hit testing never diverge.
EdgePathMath
Pure geometry helpers for building connection paths, hit-test rectangles, and waypoint routing. All methods are coordinate-space agnostic: pass screen or graph Offsets and the results come back in the same space.
FlowAlignmentGuide
An active alignment guide while dragging: a line in graph coordinates at position — vertical (x = position, spanning y in [start, end]) when vertical, horizontal otherwise.
FlowConnectionRequest
A request to create an edge, emitted by the canvas when a drag-to-connect gesture drops on a compatible target port.
FlowController<T, E>
The state and behavior hub for a NodeFlow canvas.
FlowEdge<E>
A directed connection between two node ports.
FlowNode<T>
A single node in the flow graph.
FlowPort
A connection point on a FlowNode.
FlowPortAnchor
A resolved port location reported to the app on hover, so it can render a hover card. The canvas only reports geometry; it draws no card itself.
FlowTheme
Fully-resolved visual values consumed directly by the canvas painters.
FlowViewport
Maps the infinite graph coordinate space onto the screen: a pan offset (x, y) in screen pixels plus a zoom scale factor.
Minimap<T, E>
A bottom-right overlay that mirrors the whole graph at a glance and pans the camera on click/drag.
MinimapPainter<T, E>
Paints node rectangles and the viewport indicator into the minimap, using a MinimapProjection to map graph -> minimap-local space.
MinimapProjection
An affine graph -> minimap-local mapping: uniform scale followed by a translation, so a graph rect fits centered inside the minimap.
NodeFlow<T, E>
A React-Flow-equivalent node canvas.
PathSegment
Base class for path segment primitives.
PendingConnection
Transient state for an in-flight drag-to-connect gesture.
QuadraticSegment
A quadratic bezier curve segment.
StraightSegment
A straight line segment from the current point to end.

Enums

FlowEdgeStyle
How an edge's path is drawn between its two ports.
FlowInteractionMode
The canvas' current pointer-interaction mode.
PortKind
Whether a port receives connections (input) or emits them (output).
PortSide
Which edge of a node a port is anchored to.
PortVisual
How a port is drawn. Phase 3 renders these; the model exists now so that FlowNode can stay final.

Extension Types

GraphOffset
A delta/movement in graph coordinate space (scaling only, no pan).
GraphPosition
Absolute position in graph/world coordinate space. Extension types keep graph and screen coordinates from being mixed at compile time.
GraphRect
A rectangle in graph/world coordinate space.
ScreenOffset
A delta/movement in screen coordinate space.
ScreenPosition
Absolute position in screen coordinate space (pixels, post pan/zoom).
ScreenRect
A rectangle in screen coordinate space.

Extensions

FlowEdgeStyleGeometry on FlowEdgeStyle
Geometry helpers for each FlowEdgeStyle. Coordinate-space agnostic: pass screen or graph Offsets; results come back in the same space.
GraphPositionOffsetExtension on GraphPosition
ScreenPositionOffsetExtension on ScreenPosition

Constants

kDefaultCornerRadius → const double
Default rounded-corner radius for smoothstep edges.
kDefaultEdgeCurvature → const double
Default curvature used by FlowEdgeStyle.bezier.
kDefaultPortExtension → const double
Default minimum extension out of a port before a wire may bend.

Functions

computeMinimapProjection({required Rect contentBounds, required Size mapSize, double padding = 8}) → MinimapProjection
Builds the projection that fits contentBounds into a mapSize paint area, leaving padding pixels of margin on every side and centering the content.
minimapContentBounds({required GraphRect? nodesBounds, required GraphRect? visibleArea}) → Rect
The graph rect the minimap should frame: the union of nodesBounds and the currently visible visibleArea, so the viewport indicator is always in frame even after panning away from the nodes. Either may be null.
portAnchor<T>(FlowNode<T> node, FlowPort port) → GraphPosition
Computes the graph-space position of port on the edge of node.
portById<T>(FlowNode<T> node, String portId) → FlowPort?
Returns the FlowPort with portId on node, or null if none matches.
resolveAlignmentSnap({required GraphRect movingBounds, required GraphOffset delta, required Iterable<GraphRect> others, double threshold = 6.0}) → AlignmentSnapResult
Detects alignment of movingBounds (the dragged selection's bounds AFTER applying the raw delta) against others: each of the moving edges and centers (left/centerX/right, top/centerY/bottom) is compared per axis and the closest match within threshold graph units wins. The returned delta carries the softly-snapped adjustment; the guides span both rects.
viewportForMinimapTap({required Offset localTap, required MinimapProjection projection, required double zoom, required Size screenSize}) → FlowViewport
The camera that centers the graph point under a minimap-local localTap on screen, preserving zoom. This is the pure core of minimap click/drag panning: minimap-local -> graph -> FlowViewport.