Minimal

17.02.2025

I just published Minimal, a minimal state management package for Flutter Architecture Components, based on the MVN (Model-View-Notifier) pattern. MVN neologism by Roman Jaquez. Thanks to NXT:FWD, as I could use one entire #myDay to try this out

It comes with a runnable example, try it out:

• Counter: the classical counter app demonstrates basic state management. This shows off non disposable and disposable notifiers

• Chroma counter: a morphing widget. This shows off two views using the same notifier, autodispose, and state selection

• Todos: the classical todos app. This shows off two notifiers using the same data model repository

  %[https://youtu.be/rNpT11ocaVc]

Here I ported my Flutter Architecture Components playground demo app from using Riverpod to using Minimal, in case someone would be interested in a real life app example and code snippets

State Management in 4 steps:

1 Create an immutable UI state

@MappableClass()
class ChromaCounterUIState with ChromaCounterUIStateMappable {
  const ChromaCounterUIState({
    this.backgroundColor = Colors.blue,
    this.count = 0,
  });
  final Color backgroundColor;
  final int count;
}

2 Create a notifier to hold your UI state

class ChromaCounterNotifier extends MMNotifier<ChromaCounterUIState> {
  ChromaCounterNotifier() : super(const ChromaCounterUIState());

  void nextMetamorph() => notify(
        state.copyWith(
          backgroundColor: _randomColor(),
          count: state.count + 1,
        ),
      );
}

3 Create a manager to access your notifier

final MMManager<ChromaCounterNotifier> chromaCounterManager =
    MMManager(ChromaCounterNotifier.new, autodispose: true);

4 Use the notifier from UI

Access the notifier upon user's actions

FloatingActionButton(
  onPressed: () => chromaCounterManager.notifier.nextMetamorph(),
);

Rebuild the UI when state changes

final notifier = chromaCounterManager.notifier;
return ListenableBuilder(
  listenable: notifier,
  builder: (context, _) => Container(
    color: notifier.state.backgroundColor,
    child: const Text('Count: ${notifier.state.count}'),
  ),
);

(Optimized) Rebuild the UI only when part of the state changes

final notifier = chromaCounterManager.notifier;
return ListenableBuilder(
  listenable: notifier.select((state) => state.backgroundColor),
  builder: (context, _) => Container(
    color: notifier.state.backgroundColor,
  ),
);