https://github.com/mstniy/computed_flutter
Reactive state management for Flutter
https://github.com/mstniy/computed_flutter
dart flutter functional-programming reactive state-management
Last synced: 29 days ago
JSON representation
Reactive state management for Flutter
- Host: GitHub
- URL: https://github.com/mstniy/computed_flutter
- Owner: mstniy
- License: bsd-3-clause
- Created: 2023-11-14T21:09:10.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2025-03-23T15:04:13.000Z (about 1 year ago)
- Last Synced: 2025-10-23T02:02:55.692Z (5 months ago)
- Topics: dart, flutter, functional-programming, reactive, state-management
- Language: Dart
- Homepage: https://pub.dev/packages/computed_flutter
- Size: 91.8 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://github.com/mstniy/computed_flutter/actions?query=branch%3Amaster+workflow%3Atests) [](https://codecov.io/github/mstniy/computed_flutter)
Flutter bindings for [Computed](https://github.com/mstniy/computed.dart).
> [!NOTE]
> [Computed](https://github.com/mstniy/computed.dart) has more in-depth documentation and examples about computation-based state management.
Computed Flutter allows you to interface Computed with Flutter-specific functionality, like `Widget`s and `Listenable`s.
- [Here is how it works](#here-is-how-it-works)
- [Using Computed with widgets](#using-computed-with-widgets)
- [Using `Computed[Stateful]Widget`](#using-`computed[stateful]widget`)
- [Using `ComputedFlutter[Stateful]Mixin`](#using-`computedflutter[stateful]mixin`)
- [Using `ComputedBuilder`](#using-`computedbuilder`)
- [Ingesting data sources](#ingesting-data-sources)
- [Using results of computations](#using-results-of-computations)
Assume you have a data source, like a `ValueListenable` representing some external state:
```
ValueListenable v;
```
And you want your UI to stay in sync with this external state.
Assume for the sake of simplicity that you want to display the value of the external state as-is.
You can achieve this with no boilerplate using Computed:
```
Text('${v.use}')
```
Note that this does not use code generation, nor does it restrict your codebase to have at most one data source per object type.
## Using Computed with widgets
Using Computed facilities, like `.use` and `.react`, inside the `build` methods of widgets requires Computed to be aware of them.
You can achieve this in several ways:
### Using `Computed[Stateful]Widget`
If you have a custom widget, extending `StatelessWidget` or `StatefulWidget`, modify them to extend `ComputedWidget` or `ComputedStatefulWidget` instead:
```
class MyWidget extends ComputedWidget {
@override
Widget build() {
// This effectively runs as a computation
return Text('${v.use}'); // Automatically re-run whenever [v] changes
}
}
```
### Using `ComputedFlutter[Stateful]Mixin`
If you do not want your widgets to extend `Computed[Stateful]Widget`, perhaps for widgets already extending some other class, you can use the mixins:
```
class MyWidget extends MyOtherWidget with ComputedFlutterMixin {
...
}
class MyStatefulWidget extends MyOtherStatefulWidget with ComputedFlutterStatefulMixin {
...
}
```
If you are using a widget whose definition you cannot modify, or wish to limit the scope of reactive widget rebuilds, use `ComputedBuilder`:
```
ComputedBuilder(builder: (ctx) =>
ExternalWidget(v.use)
)
```
Computed Flutter supports reactively depending on `ValueListenable`s with `.use`, as with Computed:
```
ValueListenable v;
final c = $((){
v.use; // Reactively depends on [v]
});
```
To depend on changes to `Listenable`s, you can use `.watch`:
```
class MyListenable implements Listenable {
int get value => ...;
...
}
MyListenable l;
final c = $((){
l.watch.value; // Reactively depends on [l]
});
```
## Using results of computations
Computed Flutter allows you to turn computations into `Listenable`s and `ValueListenable`s:
```
final c = $(() => ...); // A computation
c.asListenable; // Returns a [ComputedListenable]
c.asValueListenable; // Returns a [ValueListenable]
```
Of course, other ways of using computations as defined by the base Computed package are available. For easy reference, this includes `.use`, `.listen` and `.asStream`.