Signals Flutter

Flutter Reactive Signals Integration

This skill covers optimizing Flutter UI bindings, element-level reactive tracking, and high-frequency rendering utilizing the signals_flutter package.

Related Documentation & Items

Core Primitives

Asynchronous Operations

Reactive Collections

Utility Primitives

Flutter Widgets

Flutter Extensions

Core Primitives Quick Start Guide

The signals library exposes five core functions which are the building blocks to model any reactive business logic.

1. signal(initialValue)

Creates a new mutable signal container. You read a signal's value or subscribe to updates by accessing .value.

dartCopy code
final counter = signal(0);
print(counter.value); // 0
counter.value = 1; // Mutates value and schedules dependent updates

.peek()

Reads a signal's current value without subscribing to its mutations.

dartCopy code
final counter = signal(0);
final logCount = signal(0);

effect(() {
  print(counter.value);
  // Read using peek to avoid subscribing/triggering loop
  logCount.value = logCount.peek() + 1;
});

2. untracked(fn)

Executes a callback that reads signals without subscribing to any of them.

dartCopy code
final counter = signal(0);
final count = signal(0);

effect(() {
  print(counter.value);
  count.value = untracked(() => count.value + 1);
});

3. computed(fn)

Combines the values of multiple signals into a lazy, memoized derived signal.

dartCopy code
final first = signal('John');
final last = signal('Doe');
final fullName = computed(() => '${first.value} ${last.value}');
print(fullName.value); // John Doe

4. effect(fn)

Orchestrates immediate synchronous side effects by running a callback and subscribing to any signals read within it.

dartCopy code
final name = signal('Jane');
final dispose = effect(() => print('Hello $name'));
dispose(); // Clean up subscription

5. batch(fn)

Groups multiple signal writes into a single transaction, executing all dependent computed evaluations and effects exactly once at the end.

dartCopy code
final a = signal(0);
final b = signal(0);

batch(() {
  a.value = 1;
  b.value = 2;
});

1. Widget Rebuild Optimization

A. SignalBuilder (Preferred)

Provides localized, context-isolated widget rebuilding. Wrap only the smallest possible widgets in SignalBuilder to keep rendering extremely high-performance.

dartCopy code
SignalBuilder(
  builder: (context) => Text('Count: ${counter.value}'),
)

B. Reactive Component Widgets (SignalWidget / SignalStatefulWidget)

In v7, SignalsMixin and BuildContext.watch(context) are deprecated (and will trigger warnings via custom lint rules). Instead of mixins or context extension watches, inherit from SignalWidget or SignalStatefulWidget for automatic, highly optimized reactive tracking inside standard widget trees:

dartCopy code
// Reactive Stateless Widget
class MyWidget extends SignalWidget {
  const MyWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Text('Count: ${counter.value}');
  }
}

2. High-Frequency Rendering (SignalCustomPaint)

For ultra-high-frequency drawing driven by signals, bypass Flutter's heavy widget layout/rebuild lifecycle entirely. SignalCustomPaint and SignalPainterWidget write directly to the GPU via markNeedsPaint() calls inside custom proxy render boxes:

dartCopy code
SignalCustomPaint(
  painter: MySignalPainter(progressSignal),
  child: Container(),
)

3. Side Effects in Widget Trees (SignalEffect)

Use SignalEffect / SignalListener to trigger asynchronous side-effects (e.g., showing snackbars, navigation, showing modals) cleanly inside the widget lifecycle.

dartCopy code
SignalEffect(
  callback: (context) {
    if (errorMessage.value != null) {
      showDialog(context: context, builder: (_) => Alert(errorMessage.value!));
    }
  },
  child: ChildWidget(),
)