Connected cards

Loading interactive example…Open in new tab ↗

Opening the live canvas…

Move or resize a card and watch its connection follow the bound ports. Switch between straight, orthogonal, quadratic, and Bezier routes. Select the connector and press Enter to edit its label, or use Select label to target it directly.

Router changes are validated transactions and can be undone. Animate starts a transient path effect; Stop animation stops it without editing the document. Reset creates a new session with empty undo history and clears its animations.

The fixture uses createShape, createConnector, and named BoundEndpoint ports. Label selection uses selectConnectorLabel; path motion uses startPathAnimation and stopPathAnimation. Router changes use setConnectorRouter, sharing the inspector's validation and undo behavior.

See Connectors, Animation, and Undo/redo.

Source

DiagramDocument connectedCardsDocument() {
  final seed = DrawingSession(
    configuration: DrawingConfiguration(),
    document: DiagramDocument.empty('connected-cards'),
  );
  try {
    for (final (index, title) in ['A bright idea', 'Make it happen'].indexed) {
      seed.createShape(
        id: 'card-$index',
        type: Shapes.card,
        worldCenter: DiagramPoint(index * 480, index * 80),
        size: const DiagramSize(280, 180),
        select: false,
        textStory: TextStory(
          id: 'story-$index',
          blocks: [
            TextParagraph(
              id: 'title-$index',
              kind: ParagraphKind.paragraph,
              role: TextRole.title,
              slotId: 'title',
              runs: [
                TextRun(title, fontSize: 20, marks: {TextMark.bold}),
              ],
            ),
            TextParagraph(
              id: 'body-$index',
              kind: ParagraphKind.paragraph,
              slotId: 'body',
              runs: [
                TextRun(
                  index == 0
                      ? 'Sketch a tiny adventure.'
                      : 'Build it with a friend.',
                  fontSize: 18,
                ),
              ],
            ),
          ],
        ),
      );
    }
    seed.createConnector(
      ConnectorElement(
        id: 'journey',
        start: const BoundEndpoint(elementId: 'card-0', portId: 'right'),
        end: const BoundEndpoint(elementId: 'card-1', portId: 'left'),
        router: ConnectorRoute.orthogonal,
        labels: [
          ConnectorLabel(
            id: 'next-step',
            story: TextStory.paragraph(
              id: 'label-story',
              blockId: 'label-block',
              text: 'Try it together',
            ),
          ),
        ],
      ),
      select: false,
    );
    return seed.document;
  } finally {
    seed.dispose();
  }
}