Flutter Alien Signals

Flutter Alien Signals is a Flutter binding based on Alien Signals. It seamlessly integrates with Flutter Widgets, providing elegant usage methods and intuitive state management.

Installation

To install Alien Signals, add the following to your pubspec.yaml:

dependencies:
  flutter_alien_signals: latest

Alternatively, you can run the following command:

flutter pub add flutter_alien_signals

Example

class Counter extends SignalsWidget {
  const Counter({super.key});

  @override
  Widget build(BuildContext context) {
    final count = signal(0);
    void increment() => count.value++;

    return Scaffold(
      body: Center(
        child: Text('Count: ${count.get()}'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: increment,
        child: const Icon(Icons.plus_one),
      ),
    );
  }
}

StatelessWidget

Integrating with StatelessWidget is very simple, just use the Signals mixin:

class MyWidget extends StatelessWidget with Signals {
  ...
}

If you're writing a brand new Widget, there's a simpler SignalsWidget base class:

class MyWidget extends SignalsWidget {
  ...
}

StatefulWidget

Integration with StatefulWidget is similar, we use the StateSignals mixin:

class MyWidget extends StatefulWidget with StateSignals {
  State<MyWidget> createState() {
    return _MyWidgetState();
  }
}

class _MyWidgetState extends State<MyWidget> {
  final a = signal(0);
  ...
}

Observer

If you don't want your signal/computed to affect the entire current Widget, but instead only trigger local rebuilds when the signal's value updates, you should use SignalObserver:

class MyWidget extends SignalsWidget {
  @override
  Widget build(BuildContext context) {
    final a = signal(0);
    final b = signal(0);

    return Column(
      children: [
        // When a value updates, it will trigger a rebuild of the entire MyWidget.
        Text('A: ${a.get()}'),
        // When b value updates, only this Text widget will be rebuild.
        SignalObserver(b, (_, value) => Text('B: $value')),
      ],
    );
  }
}

Compat (.value getter)

Perhaps Alien Signals' get() and set() are not concise enough, so we've prepared the .value getter for you:

final count = signal(0);
count.value++; // count.set(count.get() + 1);

Notes

1. Apart from using with Signals/StateSignals in your Widget, other APIs are consistent with Alien Signals.
2. You can use Alien Signals API in any code in the global scope, it will handle the Scope automatically.