Getting started

Installation

Add the fluxer package to your pubspec.yaml as a dependency.

dependencies:
  fluxer: ^1.0.0

Next install the package by running:

pub get for a Dart project
flutter packages get for a Flutter project

💡

Be careful to run the previous command at the root of your project.

Import

Now that fluxer is successfully installed, you can import it in your code.

import 'package:fluxer/fluxer.dart';

Usage

Initialize the `Fluxer` instance

In your main function, you need to initialize the Fluxer instance.

  void main() {
    initFluxer()
    // Your code
  }

Here we are going to see how to use a global store. It is also possible to use local stores.

Create a store

A store is a class that extends Store and contains parts of the state of your application.

import 'package:fluxer/fluxer.dart';
 
const counterRef = Symbol('counter');
 
class CounterStore extends Store<CounterState> {
  CounterStore() : super(CounterState(0));
 
  Future<int> increment() {
    // Add the callback into the action queue. It will be executed after all
    // previous action in the queue has been executed.
    //
    // `emit` is a callback which can take 2 named arguments optional:
    // - `state` which is the new instance of the updated state
    // - `dispatch` (bool) if it is true (by default) it tell that the action is
    //    finished and the state will no more update the state. If false it
    //    will allow to emit other state in the same action and will not remove
    //    current action from the queue.
    //
    // Add the end of the action if no emit has been fired, then the action will
    // automatically be removed from the action queue.
    return addAction((emit) {
      emit(state: CounterState(state.counter + 1));
 
      // The state is now the new state updated during the call to emit
      return state.counter;
    });
  }
}
 
class CounterState {
  CounterState(this.counter);
 
  final int counter;
}

Then you instantiate your store and add it to the Fluxer instance to make it available in your widgets

  import './counter_store.dart';
 
  void main() {
    initFluxer()
    // Create an instance of CounterStore globally accessible using the ref (which is
    // of type dynamic so it can be whatever you want)
    fluxer.addRef(counterRef, CounterStore());
 
    // Your code
  }

The authRef is a symbol that will be used to access the store in your widgets. It can be of any type.

Use the store in your widgets

Now that you have a store, you can use it in your widgets.

To use it you need to use the Consumer widget.

Consumer<CounterStore, CounterState>(
  ref: "counterRef",
  build: (context, state) => Center(
    child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Text(state.counter.toString()),
          ElevatedButton(
            onPressed: () {
              fluxer.of<CounterStore>("counterRef").increment();
            },
            child: const Text("increment"),
          )
        ]),
  ),
)

Introduction Store