NodeFlowTheme class

Theme configuration for the node flow editor.

Defines the visual appearance and styling for all elements in the node flow editor including nodes, connections, ports, grid, and interaction feedback.

The theme uses Flutter's ThemeExtension pattern, allowing it to be integrated with Flutter's theming system and accessed via Theme.of(context).

Two built-in themes are provided:

Example usage:

// Use a built-in theme
NodeFlowEditor(
  theme: NodeFlowTheme.light,
  // ...
);

// Customize a theme
final customTheme = NodeFlowTheme.light.copyWith(
  backgroundColor: Colors.grey[100],
  gridStyle: GridStyles.hierarchical,
  nodeTheme: NodeTheme.light.copyWith(
    defaultColor: Colors.blue,
  ),
);

// Access theme from context (when using Theme widget)
final theme = Theme.of(context).extension<NodeFlowTheme>()!;
Inheritance

Constructors

NodeFlowTheme({required NodeTheme nodeTheme, required ConnectionTheme connectionTheme, required ConnectionTheme temporaryConnectionTheme, Duration connectionAnimationDuration = const Duration(seconds: 2), required PortTheme portTheme, required LabelTheme labelTheme, Color backgroundColor = Colors.white, Color gridColor = const Color(0xFF919191), double gridSize = 20.0, double gridThickness = 0.5, GridStyle gridStyle = GridStyles.dots, Color selectionColor = const Color(0x3300BCD4), Color selectionBorderColor = const Color(0xFF00BCD4), double selectionBorderWidth = 1.0, SystemMouseCursor cursorStyle = SystemMouseCursors.basic, SystemMouseCursor dragCursorStyle = SystemMouseCursors.grabbing, SystemMouseCursor nodeCursorStyle = SystemMouseCursors.click, SystemMouseCursor portCursorStyle = SystemMouseCursors.precise, bool debugMode = false})
const

Properties

backgroundColor Color
Background color of the canvas.
final
connectionAnimationDuration Duration
Duration for the connection animation controller cycle.
final
connectionTheme ConnectionTheme
Theme for established connection appearance (colors, stroke width, style, etc.).
final
cursorStyle SystemMouseCursor
Default mouse cursor style for the canvas.
final
debugMode bool
Whether to enable debug visualization.
final
dragCursorStyle SystemMouseCursor
Mouse cursor style when dragging nodes or panning.
final
gridColor Color
Color of the grid lines or dots.
final
gridSize double
Spacing between grid lines in pixels.
final
gridStyle GridStyle
The grid style to render on the canvas background.
final
gridThickness double
Thickness of grid lines in pixels.
final
hashCode int
The hash code for this object.
no setterinherited
labelTheme LabelTheme
Theme for connection label styling (font, background, positioning).
final
nodeCursorStyle SystemMouseCursor
Mouse cursor style when hovering over nodes.
final
nodeTheme NodeTheme
Theme for node appearance (colors, borders, shadows, etc.).
final
portCursorStyle SystemMouseCursor
Mouse cursor style when hovering over ports or creating connections.
final
portTheme PortTheme
Theme for port appearance (size, colors, shapes).
final
runtimeType Type
A representation of the runtime type of the object.
no setterinherited
selectionBorderColor Color
Border color for the selection rectangle.
final
selectionBorderWidth double
Border width for the selection rectangle in pixels.
final
selectionColor Color
Fill color for the selection rectangle.
final
temporaryConnectionTheme ConnectionTheme
Theme for temporary connection appearance during connection creation.
final
type Object
The extension's type.
no setterinherited

Methods

copyWith({NodeTheme? nodeTheme, ConnectionTheme? connectionTheme, ConnectionTheme? temporaryConnectionTheme, Duration? connectionAnimationDuration, PortTheme? portTheme, LabelTheme? labelTheme, Color? backgroundColor, Color? gridColor, double? gridSize, double? gridThickness, GridStyle? gridStyle, Color? selectionColor, Color? selectionBorderColor, double? selectionBorderWidth, SystemMouseCursor? cursorStyle, SystemMouseCursor? dragCursorStyle, SystemMouseCursor? nodeCursorStyle, SystemMouseCursor? portCursorStyle, bool? debugMode}) NodeFlowTheme
Creates a copy of this theme extension with the given fields replaced by the non-null parameter values.
override
lerp(covariant NodeFlowTheme? other, double t) NodeFlowTheme
Linearly interpolate with another ThemeExtension object.
override
noSuchMethod(Invocation invocation) → dynamic
Invoked when a nonexistent method or property is accessed.
inherited
toString() String
A string representation of this object.
inherited

Operators

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

Static Properties

dark NodeFlowTheme
Built-in dark theme with muted colors and visible grid.
final

Constants

light → const NodeFlowTheme
Built-in light theme with bright colors and subtle grid.