Vyuh Node Flow

Installation

Set up Vyuh Node Flow in your Flutter project

Installation

Get Vyuh Node Flow running in your Flutter project in under 5 minutes.

Requirements

RequirementMinimum Version
Flutter3.32.0+
Dart SDK3.9.0+

Setup

Add the Dependency

Add vyuh_node_flow to your pubspec.yaml:

pubspec.yaml
dependencies:
  vyuh_node_flow: ^0.8.0
pubspec.yaml
dependencies:
  vyuh_node_flow:
    git:
      url: https://github.com/vyuh-tech/vyuh_node_flow.git
      path: packages/vyuh_node_flow

Install Packages

Run the install command:

flutter pub get

Import the Library

Add the import to your Dart files:

import 'package:vyuh_node_flow/vyuh_node_flow.dart';

Verify Installation

Create a minimal test to confirm everything works:

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Builder(
          builder: (context) {
            // If this compiles, the package is installed correctly
            final controller = NodeFlowController<String>();
            return Center(
              child: Text('Vyuh Node Flow v0.8.0 installed!'),
            );
          },
        ),
      ),
    );
  }
}

Run the app. If it compiles and runs without errors, you're ready to go.

Under the Hood: Vyuh Node Flow uses MobX for reactive state management. The package handles all MobX setup internally - no additional configuration needed.

What's Included

The vyuh_node_flow package exports everything you need:

Widgets

ExportPurpose
NodeFlowEditorThe main interactive editor widget with full editing capabilities
NodeFlowViewerRead-only display widget for presenting flows
NodeFlowMinimapBird's-eye navigation view of the canvas

State & Configuration

ExportPurpose
NodeFlowControllerCentral controller for state management, graph operations, and viewport control
NodeFlowConfigBehavioral configuration (grid snapping, zoom limits, auto-panning, debug mode)
AutoPanConfigAuto-panning behavior when dragging near canvas edges
NodeFlowBehaviorPresets for editor modes: design, preview, present
NodeFlowEventsEvent callbacks for nodes, ports, connections, viewport, and annotations

Core Data Models

ExportPurpose
Node<T>Node with generic data type, position, size, and ports
PortConnection point with position, shape, and constraints
ConnectionLink between output and input ports with optional styling
AnnotationBase class for visual overlays (sticky notes, groups, markers)
StickyAnnotationFree-floating text notes
GroupAnnotationVisual containers that surround nodes
MarkerAnnotationCompact icon badges for status and semantic indicators

Theming

ExportPurpose
NodeFlowThemeComplete theme configuration for the editor
NodeThemeNode appearance (borders, selection, hover states)
ConnectionThemeConnection styling (color, width, endpoints)
PortThemePort appearance (size, color, labels)
GridStyleBackground grid patterns (lines, dots, cross, hierarchical, none)

Visual Customization

ExportPurpose
ConnectionStylePath algorithms (bezier, smoothstep, step, straight)
ConnectionEffectAnimations (FlowingDashEffect, ParticleEffect, GradientFlowEffect, PulseEffect)
NodeShapeNode shapes (CircleShape, DiamondShape, HexagonShape)
PortShapePort shapes (circle, square, diamond, triangle, capsuleHalf, none)

Next Steps

On this page