vyuhDiagram

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 session; Undo restores them together. Slider previews commit as one edit.

The example composes a ShapeDefinition, a ShapeWidgetLayerDefinition, and a ShapeWidgetRegistry. 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
ShapeRegistry controlsExampleRegistry() => ShapeRegistry.withStandard([
  playgroundControlsDefinition(
    style: const ShapeStyle(
      fill: DiagramColor(0xFFF4F4F5),
      stroke: DiagramColor(0xFFD4D4D8),
      strokeWidth: 1,
      cornerRadius: 12,
    ),
  ),
]);