2. Register and create shapes

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

123456789

A registry describes kinds of shapes: their geometry, text regions, connection sites and supported edits. A document contains instances with stable IDs, positions and content. Register a type once; create as many instances as needed.

Use the shared Flutter entry point throughout this tutorial:

import 'package:vyuh_diagram_flutter/vyuh_diagram_flutter.dart';

Keep the controller from step 1. Its registry, assembled from the installed extensions and the always-installed core, already registers rectangles, polygons and ellipses, so there is no need to redefine them; controller.diagram.registry holds it. A four-sided polygon supplies our decision diamond. Add these fields and replace initState:

late final String startId;
late final String processId;
late final String decisionId;

@override
void initState() {
  super.initState();
  startId = controller.createShape(
    Shapes.ellipse,
    at: const DiagramPoint(-240, 0), text: 'Start',
  );
  processId = controller.createShape(
    Shapes.rectangle,
    at: DiagramPoint.zero, text: 'Review request',
  );
  decisionId = controller.createShape(
    Shapes.polygon, values: {'sides': 4},
    at: const DiagramPoint(260, 0), text: 'Approved?',
  );
}

Positions are world coordinates. Panning and zooming change how you view them, not their saved positions. Direct creation returns the new shape's ID. Creation through controller.edits returns an EditResult with that ID in id. We retain those IDs to connect the nodes later.

Checkpoint: move the three shapes and double-click their text. The registry supplies editing behavior without host drag handlers. Step 7 adds our own registered type.