SignalCustomPainter class abstract

A premium custom painter that automatically repaints when any observed signal changes, bypassing Flutter's widget build and layout phases completely.

SignalCustomPainter registers subscriptions to the provided list of signals. When any of these signals fire, a GPU repaint is scheduled directly via markNeedsPaint(), bypassing the widget-tree build cycle and layout passes for unmatched graphics performance.

Interactive Star Field Canvas Example

import 'package:flutter/material.dart';
import 'package:signals/signals_flutter.dart';

final cursorOffset = signal(const Offset(0, 0));

class StarField extends StatelessWidget {
  const StarField({super.key});

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onPanUpdate: (details) {
        cursorOffset.value = details.localPosition;
      },
      child: Container(
        color: const Color(0xFF0B0D19),
        child: SignalCustomPaint(
          painter: StarPainter(cursorOffset),
          child: const SizedBox.expand(),
        ),
      ),
    );
  }
}

class StarPainter extends SignalCustomPainter {
  StarPainter(this.offsetSignal) : super(signals: [offsetSignal]);

  final ReadonlySignal<Offset> offsetSignal;

  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.white
      ..style = PaintingStyle.fill;

    // Draw 100 stars deterministically distributed across the canvas size
    for (int i = 0; i < 100; i++) {
      final double x = ((i * 197) % 1000) / 1000 * size.width;
      final double y = ((i * 541) % 1000) / 1000 * size.height;
      final double starSize = ((i * 7) % 4) + 1.5;

      final starPos = Offset(x, y);
      final distance = (starPos - offsetSignal.value).distance;

      if (distance < 120.0) {
        // Spotlight/Twinkle effect: make stars near the cursor brighter & larger!
        final factor = 1.0 - (distance / 120.0);
        paint.color = Colors.amber.withOpacity(0.3 + 0.7 * factor);
        final glowSize = starSize + (factor * 4.0);
        canvas.drawCircle(starPos, glowSize, paint);

        // Draw premium constellation lines connecting nearby stars to the cursor
        final linePaint = Paint()
          ..color = Colors.amber.withOpacity(0.25 * factor)
          ..strokeWidth = 1.0;
        canvas.drawLine(offsetSignal.value, starPos, linePaint);
      } else {
        // Normal distant star
        paint.color = Colors.white.withOpacity(0.4);
        canvas.drawCircle(starPos, starSize, paint);
      }
    }

    // Draw the interactive controller glow source
    final cursorPaint = Paint()
      ..color = Colors.amber.withOpacity(0.8)
      ..maskFilter = const MaskFilter.blur(BlurStyle.normal, 6.0);
    canvas.drawCircle(offsetSignal.value, 6.0, cursorPaint);
  }

  @override
  bool shouldRepaint(covariant StarPainter oldDelegate) => true;
}