Skip to content

Commit c156ea4

Browse files
pavanpodilapavanpodila
committed
fix: add example and update image links in readme
1 parent adba930 commit c156ea4

File tree

2 files changed

+307
-6
lines changed

2 files changed

+307
-6
lines changed

‎packages/vyuh_node_flow/EXAMPLE.md‎

Lines changed: 303 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,303 @@
1+
# Vyuh Node Flow - Examples
2+
3+
This document provides practical examples to help you get started with Vyuh Node Flow.
4+
5+
---
6+
7+
## 🚀 Quick Start - Simple Flow Editor
8+
9+
Here's a minimal example to create a basic node flow editor:
10+
11+
```dart
12+
import 'package:flutter/material.dart';
13+
import 'package:vyuh_node_flow/vyuh_node_flow.dart';
14+
15+
class SimpleFlowEditor extends StatefulWidget {
16+
@override
17+
State<SimpleFlowEditor> createState() => _SimpleFlowEditorState();
18+
}
19+
20+
class _SimpleFlowEditorState extends State<SimpleFlowEditor> {
21+
late final NodeFlowController<String> controller;
22+
23+
@override
24+
void initState() {
25+
super.initState();
26+
27+
// 1. Create the controller
28+
controller = NodeFlowController<String>();
29+
30+
// 2. Add some nodes
31+
controller.addNode(Node<String>(
32+
id: 'node-1',
33+
type: 'input',
34+
position: const Offset(100, 100),
35+
data: 'Input Node',
36+
outputPorts: const [Port(id: 'out', name: 'Output')],
37+
));
38+
39+
controller.addNode(Node<String>(
40+
id: 'node-2',
41+
type: 'output',
42+
position: const Offset(400, 100),
43+
data: 'Output Node',
44+
inputPorts: const [Port(id: 'in', name: 'Input')],
45+
));
46+
47+
// 3. Create a connection between nodes
48+
controller.createConnection('node-1', 'out', 'node-2', 'in');
49+
}
50+
51+
@override
52+
Widget build(BuildContext context) {
53+
return Scaffold(
54+
appBar: AppBar(title: const Text('Simple Flow Editor')),
55+
body: NodeFlowEditor<String>(
56+
controller: controller,
57+
theme: NodeFlowTheme.light,
58+
nodeBuilder: (context, node) => _buildNode(node),
59+
),
60+
);
61+
}
62+
63+
Widget _buildNode(Node<String> node) {
64+
return Container(
65+
padding: const EdgeInsets.all(16),
66+
decoration: BoxDecoration(
67+
color: Colors.white,
68+
border: Border.all(color: Colors.grey.shade300),
69+
borderRadius: BorderRadius.circular(8),
70+
),
71+
child: Column(
72+
mainAxisSize: MainAxisSize.min,
73+
children: [
74+
Text(
75+
node.data,
76+
style: const TextStyle(fontWeight: FontWeight.bold),
77+
),
78+
const SizedBox(height: 4),
79+
Text(
80+
node.type,
81+
style: TextStyle(fontSize: 10, color: Colors.grey.shade600),
82+
),
83+
],
84+
),
85+
);
86+
}
87+
}
88+
```
89+
90+
---
91+
92+
## 🎨 Customizing the Theme
93+
94+
You can easily customize the appearance of your flow editor:
95+
96+
```dart
97+
import 'package:flutter/material.dart';
98+
import 'package:vyuh_node_flow/vyuh_node_flow.dart';
99+
100+
class ThemedFlowEditor extends StatefulWidget {
101+
@override
102+
State<ThemedFlowEditor> createState() => _ThemedFlowEditorState();
103+
}
104+
105+
class _ThemedFlowEditorState extends State<ThemedFlowEditor> {
106+
late final NodeFlowController<String> controller;
107+
108+
@override
109+
void initState() {
110+
super.initState();
111+
controller = NodeFlowController<String>();
112+
113+
// Create a custom theme
114+
final customTheme = NodeFlowTheme.light.copyWith(
115+
connectionStyle: ConnectionStyles.smoothstep,
116+
connectionTheme: NodeFlowTheme.light.connectionTheme.copyWith(
117+
color: Colors.blue.shade300,
118+
strokeWidth: 2.5,
119+
),
120+
portTheme: NodeFlowTheme.light.portTheme.copyWith(
121+
size: 12.0,
122+
color: Colors.blue.shade400,
123+
),
124+
gridStyle: GridStyle.dots,
125+
gridColor: Colors.grey.shade300,
126+
);
127+
128+
// Apply the theme
129+
controller.setTheme(customTheme);
130+
131+
// Add your nodes...
132+
_setupNodes();
133+
}
134+
135+
void _setupNodes() {
136+
controller.addNode(Node<String>(
137+
id: 'start',
138+
type: 'start',
139+
position: const Offset(100, 200),
140+
data: 'Start',
141+
outputPorts: const [Port(id: 'out', name: 'Next')],
142+
));
143+
144+
controller.addNode(Node<String>(
145+
id: 'process',
146+
type: 'process',
147+
position: const Offset(350, 200),
148+
data: 'Process',
149+
inputPorts: const [Port(id: 'in', name: 'Input')],
150+
outputPorts: const [Port(id: 'out', name: 'Output')],
151+
));
152+
153+
controller.addNode(Node<String>(
154+
id: 'end',
155+
type: 'end',
156+
position: const Offset(600, 200),
157+
data: 'End',
158+
inputPorts: const [Port(id: 'in', name: 'Finish')],
159+
));
160+
161+
// Connect the nodes
162+
controller.createConnection('start', 'out', 'process', 'in');
163+
controller.createConnection('process', 'out', 'end', 'in');
164+
}
165+
166+
@override
167+
Widget build(BuildContext context) {
168+
return Scaffold(
169+
appBar: AppBar(
170+
title: const Text('Themed Flow Editor'),
171+
actions: [
172+
IconButton(
173+
icon: const Icon(Icons.light_mode),
174+
onPressed: () => controller.setTheme(NodeFlowTheme.light),
175+
tooltip: 'Light Theme',
176+
),
177+
IconButton(
178+
icon: const Icon(Icons.dark_mode),
179+
onPressed: () => controller.setTheme(NodeFlowTheme.dark),
180+
tooltip: 'Dark Theme',
181+
),
182+
],
183+
),
184+
body: NodeFlowEditor<String>(
185+
controller: controller,
186+
nodeBuilder: (context, node) => _buildNode(node),
187+
),
188+
);
189+
}
190+
191+
Widget _buildNode(Node<String> node) {
192+
final color = _getNodeColor(node.type);
193+
194+
return Container(
195+
padding: const EdgeInsets.all(16),
196+
decoration: BoxDecoration(
197+
color: color.withOpacity(0.1),
198+
border: Border.all(color: color, width: 2),
199+
borderRadius: BorderRadius.circular(12),
200+
),
201+
child: Column(
202+
mainAxisSize: MainAxisSize.min,
203+
children: [
204+
Icon(_getNodeIcon(node.type), color: color),
205+
const SizedBox(height: 8),
206+
Text(
207+
node.data,
208+
style: TextStyle(
209+
fontWeight: FontWeight.bold,
210+
color: color,
211+
),
212+
),
213+
],
214+
),
215+
);
216+
}
217+
218+
Color _getNodeColor(String type) {
219+
switch (type) {
220+
case 'start':
221+
return Colors.green;
222+
case 'process':
223+
return Colors.blue;
224+
case 'end':
225+
return Colors.red;
226+
default:
227+
return Colors.grey;
228+
}
229+
}
230+
231+
IconData _getNodeIcon(String type) {
232+
switch (type) {
233+
case 'start':
234+
return Icons.play_arrow;
235+
case 'process':
236+
return Icons.settings;
237+
case 'end':
238+
return Icons.stop;
239+
default:
240+
return Icons.circle;
241+
}
242+
}
243+
}
244+
```
245+
246+
---
247+
248+
## 🎯 Key Concepts
249+
250+
### 1. **Controller**
251+
252+
The `NodeFlowController` manages all state including nodes, connections, and viewport.
253+
254+
### 2. **Nodes**
255+
256+
Each node has:
257+
258+
- `id`: Unique identifier
259+
- `type`: Category/type of the node
260+
- `position`: Position on the canvas
261+
- `data`: Your custom data (type-safe with generics!)
262+
- `inputPorts` / `outputPorts`: Connection points
263+
264+
### 3. **Ports**
265+
266+
Connection points on nodes:
267+
268+
- Can be positioned on any side (left, right, top, bottom)
269+
- Support validation for allowed connections
270+
- Customizable appearance
271+
272+
### 4. **Theme**
273+
274+
Control the visual appearance:
275+
276+
- Built-in light/dark themes
277+
- Fully customizable colors, sizes, and styles
278+
- Grid styles (dots, lines, hierarchical, none)
279+
- Connection styles (bezier, smoothstep, straight, step)
280+
281+
---
282+
283+
## 🌐 Interactive Demo
284+
285+
Want to see all features in action? Check out our comprehensive demo:
286+
287+
**[👉 Launch Live Demo](https://flow.demo.vyuh.tech)**
288+
289+
The demo includes:
290+
291+
- Multiple workflow examples
292+
- Full theme customization
293+
- Layout algorithms
294+
- Annotations and markers
295+
- Minimap navigation
296+
- Keyboard shortcuts
297+
- And much more!
298+
299+
---
300+
301+
<p align="center">
302+
Made with ❤️ by the <a href="https://vyuh.tech">Vyuh Team</a>
303+
</p>

‎packages/vyuh_node_flow/README.md‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# Vyuh Node Flow
22

3-
![Vyuh Node Flow Banner](https://github.com/vyuh-tech/vyuh_node_flow/raw/main/assets/node-flow-banner.png)
3+
![Vyuh Node Flow Banner](https://github.com/vyuh-tech/vyuh_node_flow/raw/main/packages/vyuh_node_flow/assets/node-flow-banner.png)
44

55
A flexible, high-performance node-based flow editor for Flutter applications,
66
inspired by React Flow. Build visual programming interfaces, workflow editors,
@@ -23,8 +23,6 @@ Experience Vyuh Node Flow in action! The live demo showcases all key features,
2323
including node creation, drag-and-drop connections, custom theming, annotations,
2424
minimap, and more.
2525

26-
---
27-
2826
## ✨ Key Features
2927

3028
- **High Performance** - Reactive, optimized rendering for smooth interactions
@@ -44,10 +42,10 @@ minimap, and more.
4442
## Screenshots
4543

4644
<div align="center">
47-
<img src="https://github.com/vyuh-tech/vyuh_node_flow/raw/main/assets/image-1.png" alt="Node Flow Editor Screenshot 1" width="800"/>
45+
<img src="https://github.com/vyuh-tech/vyuh_node_flow/raw/main/packages/vyuh_node_flow/assets/image-1.png" alt="Node Flow Editor Screenshot 1" width="800"/>
4846
<br/>
4947
<br/>
50-
<img src="https://github.com/vyuh-tech/vyuh_node_flow/raw/main/assets/image-2.png" alt="Node Flow Editor Screenshot 2" width="800"/>
48+
<img src="https://github.com/vyuh-tech/vyuh_node_flow/raw/main/packages/vyuh_node_flow/assets/image-2.png" alt="Node Flow Editor Screenshot 2" width="800"/>
5149
</div>
5250

5351
## Installation
@@ -56,7 +54,7 @@ Add to your `pubspec.yaml`:
5654

5755
```yaml
5856
dependencies:
59-
vyuh_node_flow: ^0.1.0
57+
vyuh_node_flow: any
6058
```
6159
6260
Then run:

0 commit comments

Comments
 (0)