flutter_flux 4.1.3

  • Readme
  • Changelog
  • Example
  • Installing
  • 84

flutter_flux #

A Dart app architecture library with uni-directional data flow inspired by RefluxJS and Facebook's Flux.

This is an experimental package and does not have official support from the Flutter team. However, feedback is most welcome!

Overview #


flutter_flux implements a uni-directional data flow pattern comprised of Actions, Stores, and StoreWatchers. It is based on w_flux, but modified to use Flutter instead of React.

  • Actions initiate mutation of app data that resides in Stores.
  • Data mutations within Stores trigger re-rendering of app view (defined in StoreWatcher).
  • Flutter Widgets and other interaction sources dispatch Actions in response to user interaction.
  • and the cycle continues...

What's Included #

Action #

An Action is a command that can be dispatched (with an optional data payload) and listened to.

In flutter_flux, Actions are the sole driver of application state change. Widgets and other objects dispatch Actions in response to user interaction with the rendered view. Stores listen for these Action dispatches and mutate their internal data in response, taking the Action payload into account as appropriate.

import 'package:flutter_flux/flutter_flux.dart';

// define an action
final Action<String> displayString = new Action<String>();

// dispatch the action with a payload

// listen for action dispatches

_displayAlert(String payload) {

BONUS: Actions are await-able!

They return a Future that completes after all registered Action listeners complete. It's NOT generally recommended to use this feature within normal app code, but it is quite useful in unit test code.

Store #

A Store is a repository and manager of app state. The base Store class provided by flutter_flux should be extended to fit the needs of your app and its data. App state may be spread across many independent stores depending on the complexity of the app and your desired app architecture.

By convention, a Store's internal data cannot be mutated directly. Instead, Store data is mutated internally in response to Action dispatches. Stores should otherwise be considered read-only, publicly exposing relevant data ONLY via getter methods. This limited data access ensures that the integrity of the uni-directional data flow is maintained.

A Store can be listened to to receive external notification of its data mutations. Whenever the data within a Store is mutated, the trigger method is used to notify any registered listeners that updated data is available. In flutter_flux, StoreWatchers listen to Stores, typically triggering re-rendering of UI elements based on the updated Store data.

import 'package:flutter_flux/flutter_flux.dart';

class RandomColorStore extends Store {

  // Public data is only available via getter method
  String _backgroundColor = 'gray';
  String get backgroundColor => _backgroundColor;

  // Actions relevant to the store are passed in during instantiation
  RandomColorActions _actions;

  RandomColorStore(RandomColorActions this._actions) {
    // listen for relevant action dispatches

  _changeBackgroundColor(_) {
    // action dispatches trigger internal data mutations
    _backgroundColor = '#' + (new Random().nextDouble() * 16777215).floor().toRadixString(16);

    // trigger to notify external listeners that new data is available

BONUS: Stores provide an optional terse syntax for action -> data mutation -> trigger operations.

// verbose syntax

_handleAction(payload) {
    // perform data mutation
    counter += payload;

// equivalent terse syntax
triggerOnAction(actions.incrementCounter, (payload) => counter += payload);

Examples #

Simple examples of flutter_flux usage can be found in the example directory. The example README includes instructions for building / running them.

External Consumption #

flutter_flux implements a uni-directional data flow within an isolated application or code module. If flutter_flux is used as the internal architecture of a library, this internal data flow should be considered when defining the external API.

  • External API methods intended to mutate internal state should dispatch Actions, just like any internal user interaction.
  • External API methods intended to query internal state should leverage the existing read-only Store getter methods.
  • External API streams intended to notify the consumer about internal state changes should be dispatched from the internal Stores, similar to their triggers.

4.1.3 #

Fixed in the library:

  • Add support for new mixin syntax from Dart 2
  • Modified triggerOnConditionalAction() so that onAction() more accurately describes its behavior by returning FutureOr<bool> instead of bool.

4.1.2 #

  • Fixed dependencies versions

4.1.1 #

  • Updated iOS and Android build resources for Flutter beta.

4.1.0 #

Fix build errors with Flutter beta.

Fixed in the library:

  • Error: A value of type '(dart.core::String) → dart.core::Null' can't be assigned to a variable of type '(dynamic) → dynamic'.
  • Version in pubspec.yaml needs to be bumped.
  • Error from flutter analyze: fix mixin_inherits_from_not_object. (Added analysis_options.)

Fixed in the example:

  • Text editor for the message was broken because insert cursor was at the wrong position.

Finally, removed ThrottledStore from README and test - it's not used.

4.0.1 #

Rewrote the sample code to use StoreWatcherMixin

The StoreWatcher class has proved to be confusing to use. Most developers want to add the Store functionality into an existing class, not add something else into the hierarchy. Rewrote the sample code to show how to use StoreWatcherMixin to add notifications to your own widget.


flutter_flux example #

Simple mock chat app example

flutter run

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:

  flutter_flux: ^4.1.3

2. Install it

You can install packages from the command line:

with Flutter:

$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:

import 'package:flutter_flux/flutter_flux.dart';
Describes how popular the package is relative to other packages. [more]
Code health derived from static analysis. [more]
Reflects how tidy and up-to-date the package is. [more]
Weighted score of the above. [more]
Learn more about scoring.

We analyzed this package on Jan 25, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.7.0
  • pana: 0.13.4
  • Flutter: 1.12.13+hotfix.5

Health suggestions

Format lib/src/action.dart.

Run flutter format to format lib/src/action.dart.

Format lib/src/store.dart.

Run flutter format to format lib/src/store.dart.

Format lib/src/store_watcher.dart.

Run flutter format to format lib/src/store_watcher.dart.

Maintenance suggestions

Package is getting outdated. (-20 points)

The package was last published 62 weeks ago.


Package Constraint Resolved Available
Direct dependencies
Dart SDK >=1.24.0 <3.0.0
flutter 0.0.0
meta ^1.0.3 1.1.8
Transitive dependencies
collection 1.14.11 1.14.12
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
mockito ^4.0.0
quiver >=2.0.0 <3.0.0
test ^1.5.1