Custom effect

Loading interactive example…Open in new tab ↗

Opening the live canvas…

A DiagramFlutterExtension contributes an EffectDefinition for its own EffectKind: a dashed ring that turns around a shape, painted from EffectContext.progress. Play orbit plays it on every shape with controller.effects.play(const Effect(orbit), on: id).

The definition advertises its color, opacity, speed, repeat count, spread and width. Select a shape: the inspector lists Orbit beside the built-in shape effects and offers exactly those values.

See custom effects.

Source

final orbitEffects = DiagramFlutterExtension(
  id: 'demo.orbit',
  effects: [
    EffectDefinition(
      kind: orbit,
      label: 'Orbit',
      placement: EffectPlacement.around,
      properties: const {
        EffectProperty.color,
        EffectProperty.opacity,
        EffectProperty.speed,
        EffectProperty.repeat,
        EffectProperty.spread,
        EffectProperty.width,
      },
      paint: (canvas, context) {
        final effect = context.effect;
        final bounds = context.shape.bounds;
        final ring = Rect.fromCircle(
          center: Offset(bounds.center.x, bounds.center.y),
          radius:
              math.max(bounds.width, bounds.height) / 2 +
              effect.spread * context.sizeToWorld,
        );
        final paint = context.createPaint()
          ..style = PaintingStyle.stroke
          ..strokeWidth = effect.width * context.sizeToWorld
          ..strokeCap = StrokeCap.round;
        const sweep = math.pi / 4;
        final turn = context.progress * math.pi * 2;
        for (var index = 0; index < 8; index++) {
          canvas.drawArc(ring, turn + index * sweep, sweep * .55, false, paint);
        }
      },
    ),
  ],
);