NodeFlowEditor<T> class

Node flow editor widget using MobX for reactive state management.

This is the main widget for displaying and interacting with a node-based graph. It provides a highly interactive canvas with support for:

  • Node rendering with custom builders
  • Connection creation and management
  • Multiple selection modes
  • Viewport panning and zooming
  • Annotations (sticky notes, markers, groups)
  • Keyboard shortcuts
  • Touch and mouse interactions

Example:

NodeFlowEditor<MyData>(
  controller: controller,
  theme: NodeFlowTheme.defaultTheme,
  nodeBuilder: (context, node) {
    return MyCustomNodeWidget(node: node);
  },
  onNodeSelected: (node) {
    print('Selected: ${node?.id}');
  },
)
Inheritance
Available extensions

Constructors

NodeFlowEditor({Key? key, required NodeFlowController<T> controller, required Widget nodeBuilder(BuildContext context, Node<T> node), required NodeFlowTheme theme, NodeShape? nodeShapeBuilder(BuildContext context, Node<T> node)?, Widget nodeContainerBuilder(BuildContext context, Node<T> node, Widget content)?, ValueChanged<Node<T>?>? onNodeSelected, ValueChanged<Node<T>>? onNodeTap, ValueChanged<Node<T>>? onNodeDoubleTap, ValueChanged<Node<T>>? onNodeCreated, ValueChanged<Node<T>>? onNodeDeleted, ValueChanged<Connection>? onConnectionTap, ValueChanged<Connection>? onConnectionDoubleTap, ValueChanged<Connection>? onConnectionCreated, ValueChanged<Connection>? onConnectionDeleted, ValueChanged<Connection?>? onConnectionSelected, ValueChanged<Annotation?>? onAnnotationSelected, ValueChanged<Annotation>? onAnnotationTap, ValueChanged<Annotation>? onAnnotationCreated, ValueChanged<Annotation>? onAnnotationDeleted, ConnectionValidationResult onBeforeStartConnection(ConnectionStartContext<T> context)?, ConnectionValidationResult onBeforeCompleteConnection(ConnectionCompleteContext<T> context)?, bool enablePanning = true, bool enableZooming = true, bool enableSelection = true, bool enableNodeDragging = true, bool enableConnectionCreation = true, bool enableNodeDeletion = true, bool scrollToZoom = true, bool showAnnotations = true})
const

Properties

controller → NodeFlowController<T>
The controller that manages the graph state.
final
enableConnectionCreation → bool
Whether to enable creating connections by dragging from ports.
final
enableNodeDeletion → bool
Whether to enable node deletion via keyboard shortcuts (Delete/Backspace) and API.
final
enableNodeDragging → bool
Whether to enable dragging nodes with the mouse.
final
enablePanning → bool
Whether to enable viewport panning with mouse/trackpad drag.
final
enableSelection → bool
Whether to enable selection operations (shift+drag selection rectangle).
final
enableZooming → bool
Whether to enable zoom controls (pinch-to-zoom, scroll wheel zoom).
final
hashCode → int
The hash code for this object.
no setterinherited
key → Key?
Controls how one widget replaces another widget in the tree.
finalinherited
nodeBuilder → Widget Function(BuildContext context, Node<T> node)
Builder function for rendering node content.
final
nodeContainerBuilder → Widget Function(BuildContext context, Node<T> node, Widget content)?
Optional builder for customizing the node container.
final
nodeShapeBuilder → NodeShape? Function(BuildContext context, Node<T> node)?
Optional builder for determining the shape of a node.
final
onAnnotationCreated → ValueChanged<Annotation>?
Called when an annotation is created.
final
onAnnotationDeleted → ValueChanged<Annotation>?
Called when an annotation is deleted.
final
onAnnotationSelected → ValueChanged<Annotation?>?
Called when an annotation's selection state changes.
final
onAnnotationTap → ValueChanged<Annotation>?
Called when an annotation is tapped.
final
onBeforeCompleteConnection → ConnectionValidationResult Function(ConnectionCompleteContext<T> context)?
Validation callback called before completing a connection to a target port.
final
onBeforeStartConnection → ConnectionValidationResult Function(ConnectionStartContext<T> context)?
Validation callback called before starting a connection from a port.
final
onConnectionCreated → ValueChanged<Connection>?
Called when a connection is created.
final
onConnectionDeleted → ValueChanged<Connection>?
Called when a connection is deleted.
final
onConnectionDoubleTap → ValueChanged<Connection>?
Called when a connection is double-tapped.
final
onConnectionSelected → ValueChanged<Connection?>?
Called when a connection's selection state changes.
final
onConnectionTap → ValueChanged<Connection>?
Called when a connection is tapped.
final
onNodeCreated → ValueChanged<Node<T>>?
Called when a node is created and added to the graph.
final
onNodeDeleted → ValueChanged<Node<T>>?
Called when a node is deleted from the graph.
final
onNodeDoubleTap → ValueChanged<Node<T>>?
Called when a node is double-tapped.
final
onNodeSelected → ValueChanged<Node<T>?>?
Called when a node's selection state changes.
final
onNodeTap → ValueChanged<Node<T>>?
Called when a node is tapped.
final
runtimeType → Type
A representation of the runtime type of the object.
no setterinherited
scrollToZoom → bool
Whether trackpad scroll gestures should cause zooming.
final
showAnnotations → bool
Whether to show the annotation layers (sticky notes, markers, groups).
final
theme → NodeFlowTheme
The theme configuration for styling the editor.
final

Methods

createElement() → StatefulElement
Creates a StatefulElement to manage this widget's location in the tree.
inherited
createState() → State<NodeFlowEditor<T>>
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
withAnnotationLayer(NodeFlowController<T> controller) → Widget

Available on Widget, provided by the AnnotationLayerSupport extension

Wraps this widget with an annotation layer.

Operators

operator ==(Object other) → bool
The equality operator.
inherited