withData<T> static method

NodeFlowViewer<T> withData<T>({
  1. Key? key,
  2. required NodeFlowTheme theme,
  3. required Widget nodeBuilder(
    1. BuildContext context,
    2. Node<T> node
    ),
  4. required Map<String, Node<T>> nodes,
  5. required List<Connection> connections,
  6. NodeFlowConfig? config,
  7. Widget nodeContainerBuilder(
    1. BuildContext context,
    2. Node<T> node,
    3. Widget content
    )?,
  8. bool enablePanning = true,
  9. bool enableZooming = true,
  10. bool scrollToZoom = true,
  11. bool showAnnotations = false,
  12. bool allowSelection = false,
  13. ValueChanged<Node<T>?>? onNodeTap,
  14. ValueChanged<Node<T>?>? onNodeSelected,
  15. ValueChanged<Connection?>? onConnectionTap,
  16. ValueChanged<Connection?>? onConnectionSelected,
  17. GraphViewport? initialViewport,
})

Convenience factory to create a viewer with data pre-loaded.

This factory creates a NodeFlowController internally and populates it with the provided nodes and connections. Useful for quickly displaying a graph without manually managing the controller.

Parameters:

  • theme: Required theme for styling the viewer
  • nodeBuilder: Required function to build node content
  • nodes: Map of node IDs to Node objects
  • connections: List of Connection objects
  • config: Optional configuration for viewport and interaction behavior
  • initialViewport: Optional starting viewport position and zoom

Example:

final viewer = NodeFlowViewer.withData<String>(
  theme: NodeFlowTheme.light,
  nodeBuilder: (context, node) => Text(node.data),
  nodes: {
    'node1': Node(id: 'node1', data: 'First Node'),
    'node2': Node(id: 'node2', data: 'Second Node'),
  },
  connections: [
    Connection(
      id: 'conn1',
      sourceNodeId: 'node1',
      targetNodeId: 'node2',
      sourcePortId: 'out',
      targetPortId: 'in',
    ),
  ],
);

Implementation

static NodeFlowViewer<T> withData<T>({
  Key? key,
  required NodeFlowTheme theme,
  required Widget Function(BuildContext context, Node<T> node) nodeBuilder,
  required Map<String, Node<T>> nodes,
  required List<Connection> connections,
  NodeFlowConfig? config,
  Widget Function(BuildContext context, Node<T> node, Widget content)?
  nodeContainerBuilder,
  bool enablePanning = true,
  bool enableZooming = true,
  bool scrollToZoom = true,
  bool showAnnotations = false,
  bool allowSelection = false,
  ValueChanged<Node<T>?>? onNodeTap,
  ValueChanged<Node<T>?>? onNodeSelected,
  ValueChanged<Connection?>? onConnectionTap,
  ValueChanged<Connection?>? onConnectionSelected,
  GraphViewport? initialViewport,
}) {
  final controller = NodeFlowController<T>(
    initialViewport: initialViewport,
    config: config,
  );

  // Set theme
  controller.setTheme(theme);

  // Load nodes
  for (final node in nodes.values) {
    controller.addNode(node);
  }

  // Load connections
  for (final connection in connections) {
    controller.addConnection(connection);
  }

  return NodeFlowViewer<T>(
    key: key,
    controller: controller,
    nodeBuilder: nodeBuilder,
    nodeContainerBuilder: nodeContainerBuilder,
    theme: theme,
    enablePanning: enablePanning,
    enableZooming: enableZooming,
    scrollToZoom: scrollToZoom,
    showAnnotations: showAnnotations,
    allowSelection: allowSelection,
    onNodeTap: onNodeTap,
    onNodeSelected: onNodeSelected,
    onConnectionTap: onConnectionTap,
    onConnectionSelected: onConnectionSelected,
  );
}