1. Set up the canvas

Commercial extension tutorial · Built on the free Core + Flutter foundations. Start with the free Hello World example.

123456789

Start with an empty Flutter app. By the end of this page you will have a bounded, interactive canvas and a controller 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_flutter and its companion packages. Register your token before fetching dependencies:

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_flutter to your application:

dependencies:
  material_ui: ^1.1.0
  vyuh_diagram_flutter:
    hosted: https://pub.vyuh.tech
    version: ^3.9.0
  vyuh_diagram_extension_editor:
    hosted: https://pub.vyuh.tech
    version: ^3.9.0

Run flutter pub get. vyuh_diagram_flutter provides the canvas and controller; vyuh_diagram_extension_editor provides the editor extension that makes the canvas editable. Declare each UI, codec or extension package that your application imports.

For a headless Dart service, use vyuh_diagram_core instead. It exposes DiagramController as the headless application entry point. See API reference for the complete package list.

This editor tutorial uses material_ui for its MaterialApp, Scaffold and buttons. Keep this import throughout the tutorial so the editor controls share the matching theme. Your application can use its own Flutter UI with the controller.

Mount the controller

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

import 'package:material_ui/material_ui.dart';
import 'package:vyuh_diagram_extension_editor/vyuh_diagram_extension_editor.dart';
import 'package:vyuh_diagram_flutter/vyuh_diagram_flutter.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 controller = DiagramController(
    configuration: DiagramConfiguration(
      extensions: [
        EditorExtension(inspector: InspectorPlacement.none, toolbar: false),
      ],
    ),
  );

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

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

  @override
  Widget build(BuildContext context) =>
      SizedBox.expand(child: DiagramCanvas(controller: controller));
}

Everything the diagram can do is installed in the configuration's one extensions list. EditorExtension makes the canvas editable and adds a tool palette; this tutorial builds its own toolbar and inspector, so it turns the editor's toolbar and inspector off. Without an editor installed, the same canvas is view-only: it navigates and selects but does not edit.

The empty initState is where we will seed the flowchart next. Create the controller once, outside build, and dispose it with its owner. Each controller supports one mounted canvas. Child toolbars and panels receive that controller; 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.