computed_flutter 0.1.0 copy "computed_flutter: ^0.1.0" to clipboard
computed_flutter: ^0.1.0 copied to clipboard

Straightforward, reliable, performant and testable reactive state management for Flutter

Workflow Status codecov

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's how it works #

Assume you have a data source, like a ValueListenable representing some external state:

ValueListenable<int> 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 ComputedFlutterMixin #

If you do not want your widgets to extend Computed[Stateful]Widget, perhaps for widgets already extending some other class, you can use the mixin:

class MyWidget extends MyOtherWidget with ComputedFlutterMixin {
    ...
}

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

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

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

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]

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.

2
likes
0
pub points
0%
popularity

Publisher

unverified uploader

Straightforward, reliable, performant and testable reactive state management for Flutter

Repository (GitHub)
View/report issues

License

unknown (license)

Dependencies

computed, flutter

More

Packages that depend on computed_flutter