Exploring vyuh_node_flow: A Powerful Flutter Flow Editor for Visual Programming

vyuh_node_flow is a newly open‑source Flutter flow‑node editor released under the MIT license, offering a React‑Flow‑like set of capabilities for building visual programming interfaces.

Based on vyuh_node_flow, you can implement:

Visual programming interface : create Scratch‑ or Unreal Engine Blueprint‑style graphical programming environments.

Workflow editor : design and edit business processes, data pipelines, or automation tasks.

Interactive charts : build organization charts, mind maps, state machines, etc.

Data pipelines : visually define and manage data flow and processing steps.

As a pure Flutter SDK it supports all platforms and provides many out‑of‑the‑box features, such as:

High‑performance rendering for 100+ node types on an infinite canvas.

Fully type‑safe generic nodes.

Responsive theming for nodes, connections, and styles.

Configurable background grids, dot patterns, layered grids, or solid colors.

Pan‑and‑zoom capable minimap for navigating complex diagrams.

Annotation support (sticky notes, groups, markers) with StickyAnnotation, MarkerAnnotation, and custom overlays that follow node movement.

Custom node and container creation.

Customizable connection drawing with built‑in support for Bézier, straight, step, and smooth step paths.

Connection validation via onBeforeStartConnection and onBeforeCompleteConnection callbacks.

Rich keyboard shortcuts for selection, copy, paste, delete, zoom, alignment, etc.

Read‑only mode via NodeFlowViewer component.

The library heavily uses MobX for reactive state management; nodes, connections, and viewport are stored as Observable objects. UI updates are triggered automatically by observers.

Key architectural components include: NodeFlowController<T>: central state manager using MobX observables. NodeFlowEditor<T>: main editor widget that renders canvas, nodes, connections, and annotations, handling user interactions. Node<T>: represents a node with ID, type, position, size, data, and ports. Port: defines connection points with ID, name, position, shape, type, and multi‑connection support. Connection: represents an edge between nodes, optionally with labels and styles. Annotation hierarchy: StickyAnnotation, GroupAnnotation, MarkerAnnotation, each can depend on nodes. NodeFlowTheme: defines visual styling for nodes, connections, ports, background, grid, etc. NodeFlowConfig: controls editor behavior such as grid snapping, minimap, zoom limits. NodeGraph<T>: data structure for serialization/deserialization of the entire graph.

Rendering is performed with layered Stack composition: grid, connections, nodes, and annotations are drawn in separate layers using CustomPaint and Observer widgets, ensuring only the affected layers repaint.

Interaction handling relies on Listener, GestureDetector, and MouseRegion to perform hit‑testing ( _performHitTest) and invoke controller methods such as _startNodeDrag, _moveNodeDrag, _startConnection, _completeConnection, and _updateSelectionDrag. These methods update MobX state inside runInAction blocks for atomic updates.

Connection drawing uses ConnectionPainter with a ConnectionPathCache to store computed Path objects and hit‑test paths, avoiding redundant calculations. When nodes move, the cache is invalidated and paths are recomputed via the selected ConnectionStyle.

Performance optimizations include:

Wrapping reactive widgets with Observer for fine‑grained updates.

Using RepaintBoundary to isolate complex layers.

Caching connection paths ( ConnectionPathCache).

Spatial indexing ( SpatialIndex) for fast node queries and hit testing.

A minimal MVP example shows how to create a NodeFlowController, add two nodes, and render them with NodeFlowEditor:

import 'package:flutter/material.dart';
import 'package:vyuh_node_flow/vyuh_node_flow.dart';

class SimpleFlowEditor extends StatefulWidget {
  @override
  State<SimpleFlowEditor> createState() => _SimpleFlowEditorState();
}

class _SimpleFlowEditorState extends State<SimpleFlowEditor> {
  late final NodeFlowController<String> controller;

  @override
  void initState() {
    super.initState();
    // 1. Create the controller
    controller = NodeFlowController<String>();
    // 2. Add some nodes
    controller.addNode(Node<String>(
      id: 'node-1',
      type: 'input',
      position: const Offset(100, 100),
      data: 'Input Node',
      outputPorts: const [Port(id: 'out', name: 'Output')],
    ));
    controller.addNode(Node<String>(
      id: 'node-2',
      type: 'output',
      position: const Offset(400, 100),
      data: 'Output Node',
      inputPorts: const [Port(id: 'in', name: 'Input')],
    ));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: NodeFlowEditor<String>(
        controller: controller,
        theme: NodeFlowTheme.light,
        nodeBuilder: (context, node) => _buildNode(node),
      ),
    );
  }

  Widget _buildNode(Node<String> node) {
    return Container(
      padding: const EdgeInsets.all(16),
      child: Text(node.data),
    );
  }
}

The library’s design emphasizes extensibility, type safety, and performance, making it suitable for complex visual workflow editors in Flutter applications, even though automatic layout algorithms are not yet included.

According to the author, this project is also a tribute to React Flow.

Reference: https://github.com/vyuh-tech/vyuh_node_flow