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).

Theme Hierarchy

The theme is organized into logical sub-themes:

• nodeTheme: Node appearance (colors, borders, shadows)
• connectionTheme: Connection appearance (colors, stroke, style)
• temporaryConnectionTheme: Temporary connection during creation
• portTheme: Port appearance (size, colors, shapes)
• labelTheme: Connection label styling
• annotationTheme: Annotation appearance (selection, highlight)
• gridTheme: Grid background appearance
• selectionTheme: Selection rectangle and indicator colors
• cursorTheme: Mouse cursor styles for different interactions

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],
  gridTheme: GridTheme.light.copyWith(
    style: GridStyles.hierarchical,
  ),
  nodeTheme: NodeTheme.light.copyWith(
    defaultColor: Colors.blue,
  ),
);

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