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:
- NodeFlowTheme.light: Light color scheme suitable for bright backgrounds
- NodeFlowTheme.dark: Dark color scheme suitable for dark backgrounds
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
-
- Object
- ThemeExtension<
NodeFlowTheme> - NodeFlowTheme
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.