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)?, NodeFlowEvents<T>? events, 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
events → NodeFlowEvents<T>?
Structured event system for handling various editor events.
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
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