Minimal #0 - Getting started

23.03.2025

Overview

In this post I'll show you how to quickly get started with Minimal, a minimalistic state management package in the context of an MVN (Model View Notifier) architecture. This is only a very brief intro to get you started. I'll expand each step in details in follow-up posts

State Management in 4 Steps

Adam was on spot when he wrote:

“I never really checked the documentation because it’s so simple and easy to use. You don’t need to read everything to start building your app. Just create an immutable class, a state holder, a manager, and use the class in your UI. It’s truly minimal in every sense!”

and if you've already some basic experience with other state management solutions, you'll pick this up real fast. In case you don't, or in case you're confused, there are only 4 basic steps you need to follow to start structuring your architecture. I'll summarise them here, but they're also in the README, and the package comes with an example app which showcases the most common use cases.

1 Create an immutable UI state

You can create an immutable state using Dart Mappable, or Freezed, or anything you like

@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 state

The notifier will initiate with an initial state, and it will use notify() to mutate the 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

Only if you need to autodispose the notifier when it has no more listeners, set autodispose to true

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

4 Use the notifier from UI

When the user clicks a button, and you need to mutate the state, you can access the notifier through the manager and call a method on it

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

When the state changes, you want to rebuild your UI passing the notifier to a ListenableBuilder()

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

To avoid unnecessarily rebuilds, pass only a selection of your state to the ListenableBuilder() using select()

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

Conclusion

In this post you saw briefly how to get started using Minimal. In the next posts you'll see each step in details.