vyuhDiagram

1. Set up the canvas ​

Start with an empty Flutter app. By the end of this page you will have a bounded, interactive canvas and a session whose lifetime belongs to your screen.

Package access

You need access to the Vyuh package registry at https://pub.vyuh.tech with your designated access token to install vyuh_diagram_kit and its companion packages. Register your token before fetching dependencies:

sh
dart pub token add https://pub.vyuh.tech

Enter your designated token when prompted. Keep it private; do not commit it to your repository or include it in application source.

Enterprise licenses are allocated manually after onboarding and payment through Paddle. Our team provisions your company and package access, then sends your designated registry token. A Paddle payment receipt is not a registry token.

Once your token is installed, follow the dependency setup below and run flutter pub get to download the package. If access is denied, contact the onboarding team to check your allocation.

Don't have a license yet? Contact us for a license.

What you need ​

Use Flutter 3.47 or later with Dart 3.13 or later. Add vyuh_diagram_kit to your application:

yaml
dependencies:
  material_ui: ^1.1.0
  vyuh_diagram_kit:
    hosted: https://pub.vyuh.tech
    version: ^2.2.0

Run flutter pub get. The kit brings in the Flutter renderer, headless engine, types, and codecs. Add a companion package directly only when your application imports it.

For a headless Dart service, use vyuh_diagram_engine instead. It exposes DrawingSession as the headless application entry point. See package ownership for the complete package list.

This tutorial uses material_ui for its MaterialApp, Scaffold and buttons. The bundled inspector uses that same Material implementation through CDX. Keep this import throughout the tutorial so its controls have the matching theme and Material ancestors. Your own Flutter UI can still use the session independently; a custom inspector needs only the public command and subscription APIs.

Mount the session ​

Replace lib/main.dart with this complete app. All later steps edit this file. Keep the same DiagramSurface and its State throughout the tutorial.

dart
import 'package:material_ui/material_ui.dart';
import 'package:vyuh_diagram_kit/drawing.dart';

void main() => runApp(MaterialApp(
  theme: ThemeData(splashFactory: InkRipple.splashFactory),
  home: const Scaffold(body: DiagramSurface()),
));

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

  @override
  State<DiagramSurface> createState() => _DiagramSurfaceState();
}

class _DiagramSurfaceState extends State<DiagramSurface> {
  late final session = DrawingSession();

  @override
  void initState() {
    super.initState();
  }

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

  @override
  Widget build(BuildContext context) => SizedBox.expand(
    child: DrawingCanvas(session: session),
  );
}

The empty initState is where we will seed the flowchart next. Create the session once, outside build, and dispose it with its owner. Each session supports one mounted canvas. Child toolbars and panels borrow that session; they do not dispose it.

The canvas needs finite layout constraints. Scaffold.body provides them here; inside a Column use Expanded. Content commands work before mounting, but camera commands need a mounted, laid-out canvas.

Checkpoint: run flutter run. You should see an empty canvas without layout errors.