vyuhDiagram
Core

Connector effects ​

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

Two connectors start selected. Each button plays one effect on every selected connector with controller.effects.play, and stops it when pressed again: dots, marching dashes (EffectParticle.dash()), arrows that turn with the route (EffectParticle.arrow() at EffectScale.screen), a gradient flow from the brand color to orange, a stroke pulse, and a blink (Waveform.step) that plays three cycles with repeat: 3 and stops by itself. Dim fades a connector to a quarter of its opacity and holds it there.

Pick a brand color before playing an effect. Stop all calls controller.effects.stopAll(). Effects never edit the document or add undo entries.

See Animation & effects.

Source ​

dart
final connectorEffects = <String, Effect Function(DiagramColor brand)>{
  'Dots': (brand) => Effect.flow(color: brand, count: 3, size: 3.5),
  'Marching dashes': (brand) => Effect.flow(
    color: brand,
    particle: const EffectParticle.dash(),
    count: 6,
    size: 1.5,
    width: 3,
  ),
  'Arrows': (brand) => Effect.flow(
    color: brand,
    particle: const EffectParticle.arrow(),
    count: 2,
    size: 6,
    scale: EffectScale.screen,
  ),
  'Gradient flow': (brand) => Effect.flow(
    color: brand,
    endColor: const DiagramColor(0xFFF97316),
    count: 4,
    size: 3.5,
  ),
  'Pulse': (brand) =>
      Effect.pulse(color: brand, target: EffectTarget.stroke, width: 4),
  'Blink 3 times': (brand) => Effect.pulse(
    color: brand,
    target: EffectTarget.stroke,
    waveform: Waveform.step,
    period: const Duration(milliseconds: 500),
    repeat: 3,
    width: 4,
  ),
  'Dim': (_) => const Effect.fade(dim: 0.25),
};