Pub style: very good analysis License: MIT

A state management library that provides a simple solution for updating state and navigation.


Lets take a look at how to use flutter_onlooker. The library provides: StateNotifier, StateObserver and StateNotifierProvider classes.

  1. StateNotifier is responsible for registering and notifying states. Also it can emit navigation events. The main methods of this class:
  • observable<S> registers observable state of S type.
  • initial<S> returns initial value for state of S type.
  • latest<S> returns the latest value for state of S type.
  • contains<S> checks whether a state of S type was registered before.
  • notify<S> notifies a new state of S type.
  • navigate<T extends Object?> notifies a new navigation event.
class IncrementStateNotifier extends StateNotifier {
  IncrementStateNotifier() {
    observable<int>(initial: _counter);

  var _counter = 0;

  void useCase() {
    final initialState = initial<int>();
    final latestState = latest<int>();
    final containsState = contains<int>();

    navigate<void>('/route', arguments: _counter);
  1. StateObserver handles building a widget in response to new states. It takes 3 parameters:
  • required builder function that takes the BuildContext and state, this function is responsible for returning a widget that is to be rendered.
  • An optional notifier that can be passed directly or with using StateNotifierProvider.
  • An optional buildWhen can be implemented for more granular control over how often StateObserver rebuilds.
StateObserver<IncrementStateNotifier, int>(
  builder: (_, state) {
    return Text(
      style: Theme.of(context).textTheme.headlineMedium,
  1. StateNotifierProvider takes a create function that is responsible for creating the StateNotifier, child widget that will have access to the StateNotifier instance via Provider.of<StateNotifier>(context) or<StateNotifier>() and optional router function that will receive navigation events.
  create: (_) => IncrementStateNotifier(),
  child: const MyHomePage(title: 'Onlooker Demo'),
  router: (context, routeName, arguments) {
    return showDialog<void>(
      context: context,
      builder: (_) => AlertDialog(
        title: Text("Route is '$routeName'"),
        content: Text("You've clicked $arguments times!"),


A state management library that provides a simple solution for updating state and navigation.