computed_flutter

Description:

computed flutter

Flutter bindings for Computed.

Note
Computed has more in-depth documentation and examples about computation-based state management.

Computed Flutter allows you to interface Computed with Flutter-specific functionality, like Widgets and Listenables.
Table of contents #


Here is how it works
Using Computed with widgets

Using Computed[Stateful]Widget
Using ComputedFlutter[Stateful]Mixin
Using ComputedBuilder


Ingesting data sources
Using results of computations



Here is how it works #
Assume you have a data source, like a ValueListenable representing some external state:
ValueListenable<int> v;
copied to clipboard
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}')
copied to clipboard
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
}
}
copied to clipboard
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 {
...
}
copied to clipboard
Using ComputedBuilder #
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)
)
copied to clipboard
Ingesting data sources #
Computed Flutter supports reactively depending on ValueListenables with .use, as with Computed:
ValueListenable<int> v;

final c = $((){
v.use; // Reactively depends on [v]
});
copied to clipboard
To depend on changes to Listenables, you can use .watch:
class MyListenable implements Listenable {
int get value => ...;
...
}

MyListenable l;

final c = $((){
l.watch.value; // Reactively depends on [l]
});
copied to clipboard
Using results of computations #
Computed Flutter allows you to turn computations into Listenables and ValueListenables:
final c = $(() => ...); // A computation

c.asListenable; // Returns a [ComputedListenable]
c.asValueListenable; // Returns a [ValueListenable]
copied to clipboard
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.