vyuhDiagram
Core

Shape effects ​

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

The middle shape starts selected. Each button plays one effect on the selected shapes and stops it when pressed again:

  • Pulse oscillates the fill tint, outline and opacity smoothly.
  • Blink 3 times uses Waveform.step with repeat: 3, then stops by itself.
  • Ripple halo and Steady halo ring the outline; the steady one uses a gradient from the brand color to orange.
  • Breathe scales the shape by 6% and back; Pop scales it by 20% once. Its text and ports scale with it, while its selection handles and hit area stay on its real bounds.
  • Fade out, Fade in and Dim change its opacity once and hold.

Pick a brand color before playing an effect. The status line counts the playing effects, and Stop all stops them. Effects never edit the document or add undo entries.

See Animation & effects.

Source ​

dart
final shapeEffects = <String, Effect Function(DiagramColor brand)>{
  'Pulse': (brand) => Effect.pulse(color: brand),
  'Blink 3 times': (brand) => Effect.pulse(
    color: brand,
    waveform: Waveform.step,
    period: const Duration(milliseconds: 500),
    repeat: 3,
  ),
  'Ripple halo': (brand) => Effect.halo(color: brand, spread: 14, width: 3),
  'Steady halo': (brand) => Effect.halo(
    mode: HaloMode.steady,
    color: brand,
    endColor: const DiagramColor(0xFFF97316),
    spread: 10,
  ),
  'Breathe': (_) =>
      const Effect.scale(amount: 1.06, period: Duration(milliseconds: 2400)),
  'Pop': (_) => const Effect.scale(
    amount: 1.2,
    period: Duration(milliseconds: 360),
    waveform: Waveform.easeInOut,
    repeat: 1,
  ),
  'Fade out': (_) => const Effect.fade(),
  'Fade in': (_) => const Effect.fade(direction: FadeDirection.fadeIn),
  'Dim': (_) => const Effect.fade(dim: 0.35),
};