NodeWidget<T> class

A unified node widget that handles positioning, rendering, and interactions.

This widget is the primary UI component for rendering nodes in the flow graph. It handles:

  • Positioning and sizing based on Node state
  • Rendering ports at appropriate positions
  • Applying theme-based or custom styling
  • Reactive updates via MobX observables
  • Gesture handling (tap, double-tap, drag, context menu, hover)

The widget handles all user interactions directly via GestureDetector and MouseRegion, allowing nested widgets inside nodes to also receive gestures through Flutter's gesture arena.

The widget supports two usage patterns:

  1. Custom content: Provide a child widget for complete control over node appearance
  2. Default style: Use NodeWidget.defaultStyle for standard node rendering

Appearance can be customized per-node by providing optional appearance parameters which will override values from the theme.

Example with custom content:

NodeWidget<MyData>(
  node: myNode,
  child: MyCustomNodeContent(data: myNode.data),
  backgroundColor: Colors.blue.shade50,
)

Example with default style:

NodeWidget<MyData>.defaultStyle(
  node: myNode,
  connections: connections,
  onPortTap: handlePortTap,
)

See also:

  • Node, the data model for nodes
  • NodeTheme, which defines default styling
  • PortWidget, which renders individual ports
Inheritance
Available extensions

Constructors

NodeWidget({Key? key, required Node<T> node, required NodeFlowController<T> controller, Widget? child, NodeShape? shape, List<Connection> connections = const [], void onPortTap(String nodeId, String portId, bool isOutput)?, void onPortHover(String nodeId, String portId, bool isHover)?, void onPortContextMenu(String nodeId, String portId, bool isOutput, Offset globalPosition)?, Color? backgroundColor, Color? selectedBackgroundColor, Color? borderColor, Color? selectedBorderColor, double? borderWidth, double? selectedBorderWidth, BorderRadius? borderRadius, EdgeInsets? padding, PortBuilder<T>? portBuilder, VoidCallback? onTap, VoidCallback? onDoubleTap, void onContextMenu(Offset globalPosition)?, VoidCallback? onMouseEnter, VoidCallback? onMouseLeave, double portSnapDistance = 8.0})
Creates a node widget with optional custom content.
const
NodeWidget.defaultStyle({Key? key, required Node<T> node, required NodeFlowController<T> controller, NodeShape? shape, List<Connection> connections = const [], void onPortTap(String nodeId, String portId, bool isOutput)?, void onPortHover(String nodeId, String portId, bool isHover)?, void onPortContextMenu(String nodeId, String portId, bool isOutput, Offset globalPosition)?, Color? backgroundColor, Color? selectedBackgroundColor, Color? borderColor, Color? selectedBorderColor, double? borderWidth, double? selectedBorderWidth, BorderRadius? borderRadius, EdgeInsets? padding, PortBuilder<T>? portBuilder, VoidCallback? onTap, VoidCallback? onDoubleTap, void onContextMenu(Offset globalPosition)?, VoidCallback? onMouseEnter, VoidCallback? onMouseLeave, double portSnapDistance = 8.0})
Creates a node widget with default content layout.
const

Properties

backgroundColor → Color?
Custom background color.
final
borderColor → Color?
Custom border color.
final
borderRadius → BorderRadius?
Custom border radius.
final
borderWidth → double?
Custom border width.
final
child → Widget?
Optional custom widget to display as node content.
final
connections → List<Connection>
List of connections for determining which ports are connected.
final
controller → NodeFlowController<T>
Controller for direct drag handling.
final
hashCode → int
The hash code for this object.
no setterinherited
key → Key?
Controls how one widget replaces another widget in the tree.
finalinherited
node → Node<T>
The node data model to render.
final
onContextMenu → void Function(Offset globalPosition)?
Callback invoked when the node is right-clicked (context menu).
final
onDoubleTap → VoidCallback?
Callback invoked when the node is double-tapped.
final
onMouseEnter → VoidCallback?
Callback invoked when the mouse enters the node bounds.
final
onMouseLeave → VoidCallback?
Callback invoked when the mouse leaves the node bounds.
final
onPortContextMenu → void Function(String nodeId, String portId, bool isOutput, Offset globalPosition)?
Callback invoked when a port is right-clicked (context menu).
final
onPortHover → void Function(String nodeId, String portId, bool isHover)?
Callback invoked when a port hover state changes.
final
onPortTap → void Function(String nodeId, String portId, bool isOutput)?
Callback invoked when a port is tapped.
final
onTap → VoidCallback?
Callback invoked when the node is tapped.
final
padding → EdgeInsets?
Custom padding inside the node.
final
portBuilder → PortBuilder<T>?
Optional builder for customizing individual port widgets.
final
portSnapDistance → double
Distance around ports that expands the hit area for easier targeting.
final
runtimeType → Type
A representation of the runtime type of the object.
no setterinherited
selectedBackgroundColor → Color?
Custom background color for selected state.
final
selectedBorderColor → Color?
Custom border color for selected state.
final
selectedBorderWidth → double?
Custom border width for selected state.
final
shape → NodeShape?
Optional shape for the node.
final

Methods

build(BuildContext context) → Widget
Describes the part of the user interface represented by this widget.
override
createElement() → StatelessElement
Creates a StatelessElement to manage this widget's location in the tree.
inherited
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