vyuh_diagram_flutter 3.5.0

Flutter diagram canvas with rendering, selection, pan and zoom, text layout and themes. Build flowchart, topology and workflow editors on Vyuh Diagram.

example/main.dart

import 'package:flutter/material.dart';
import 'package:vyuh_diagram_flutter/vyuh_diagram_flutter.dart';
import 'package:vyuh_diagram_flutter/extension_api.dart';

void main() => runApp(const MinimalDiagramApp());

/// Starting content, built headlessly with the same edit API used at runtime.
final helloDocument = () {
  final controller = DiagramController();
  try {
    controller.edits.createShape(
      Shapes.rectangle,
      id: 'hello',
      at: DiagramPoint.zero,
      text: 'Hello diagram',
    );
    return controller.document;
  } finally {
    controller.dispose();
  }
}();

class MinimalDiagramApp extends StatefulWidget {
  const MinimalDiagramApp({super.key});

  @override
  State<MinimalDiagramApp> createState() => _MinimalDiagramAppState();
}

class _MinimalDiagramAppState extends State<MinimalDiagramApp> {
  final controller = DiagramController(
    document: helloDocument,
    // An editable extension makes the canvas edit with every installed tool.
    configuration: DiagramConfiguration(
      extensions: [
        const DiagramFlutterExtension(id: 'example.editing', editable: true),
      ],
    ),
  );

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) => MaterialApp(
    home: Scaffold(body: DiagramCanvas(controller: controller)),
  );
}