vyuhDiagram
Core

Widgets inside shapes ​

Loading interactive example…Open in new tab ↗
Opening the live canvas…

The card contains CDX controls. Drag its non-interactive space to move it, or select it to resize and rotate. The slider, dropdown, and button keep their own interactions. Set ready changes two registered values through the controller; Undo restores them together. Slider previews commit as one edit.

The example composes a ShapeDefinition whose body holds a ShapeWidget part, and registers its Flutter builder in DiagramFlutterExtension.widgets. The values progress, mode, and count are registered fields in the canonical document. There is no separate widget-owned persisted state, and the node has no text story or paragraph controls.

The portable output fallback is a simple region, not a screenshot of interactive controls. Hosts must declare an appropriate fallback for their own widget content.

See Widget API for hit testing, lifecycle, culling, and output contracts.

Source ​

dart
DiagramFlutterExtension controlsExampleExtension() => DiagramFlutterExtension(
  id: 'example.controls',
  widgets: playgroundWidgetRegistry().builders,
  shapes: [
    playgroundControlsDefinition(
      style: const ShapeStyle(
        fill: DiagramColor(0xFFF4F4F5),
        stroke: DiagramColor(0xFFD4D4D8),
        strokeWidth: 1,
        cornerRadius: 12,
      ),
    ),
  ],
);