flutter_alien_signals 0.2.1

Flutter Alien Signals is a Flutter binding based on Alien Signals.

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

copied to clipboard

Alternatively, you can run the following command:

flutter pub add flutter_alien_signals

copied to clipboard

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),
      ),
    );
  }
}

copied to clipboard

StatelessWidget

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

class MyWidget extends StatelessWidget with Signals {
  ...
}

copied to clipboard

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

class MyWidget extends SignalsWidget {
  ...
}

copied to clipboard

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);
  ...
}

copied to clipboard

Note

You can freely use signal-related APIs in the build method in both StatelessWidget and StatefulWidget.

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')),
      ],
    );
  }
}

copied to clipboard

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);

copied to clipboard

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.