Portable widget content

Loading interactive example…Open in new tab ↗

Opening the live canvas…

The live CDX button selects both cards. Show fallback removes its widget registration, revealing the ordinary text part declared by the shape definition. Show live control restores the interactive button. Both use the same canonical caption; switching presentation does not replace the document or add undo history.

Action	API	Result
Show fallback	Create the controller over the same document without the Flutter extension that registers the widget builder.	Displays the declared portable fallback instead of native controls.
Show live control	Install that Flutter extension again	Restores the button and its selection action.
Download SVG / PNG	controller.exportSvg / controller.exportPng	Exports portable content in either presentation mode.

The fallback is required in a ShapeWidget part. It is an ordinary body part, so layout, clipping and output can resolve it without executing Flutter controls. This example shares a canonical text story between the button and fallback. Arbitrary widget-local state is not captured in output; durable content must be represented by canonical data and declared portable parts.

Definition and live control

DiagramController fallbackExampleController() {
  final extensions = [
    ...demoModelExtensions,
    ...demoEditing(),
    cardActionExtension(),
  ];
  final seed = DiagramController(
    configuration: DiagramConfiguration(extensions: extensions),
    document: connectedCardsDocument(),
  );
  try {
    seed.edits.createShape(
      exportWidgetType,
      id: 'card-action',
      at: const DiagramPoint(260, 260),
      size: const DiagramSize(240, 64),
      select: false,
    );
    return DiagramController(
      document: seed.document,
      configuration: DiagramConfiguration(
        extensions: [...extensions],
        defaultFontFamily: 'IBM Plex Sans',
      ),
    );
  } finally {
    seed.dispose();
  }
}

Controller and presentation switch

Source: fallback.dart.

See widgets and output for the complete contracts.