Minimal MVN #

A minimal state management package for Flutter. Part of a minimalistic architecture based on the MVN (Model-View-Notifier) pattern.

This package aims for the simplest possible architecture, making it easier to understand and use, while offering an alternative to the growing complexity found in many other state management solutions, in an attempt to minimize side effects.

Getting Started #

Add Minimal to your pubspec.yaml:

dart pub add minimal_mvn
# or
flutter pub add minimal_mvn

and import the package:

import 'package:minimal_mvn/minimal_mvn.dart';

You can now start using Minimal's MVN pattern in your application. The quickest way is to follow the 4 steps below.

The package includes a complete example app showing two use cases:

• The classical counter app that demonstrates basic state management. This shows off either the non disposable and the disposable notifiers.
• A chroma counter widget, which changes the counter, the background color, and the container shape. This shows off two views using the same notifier, autodispose, and state selection to avoid unnecessary rebuilds.

Features #

• 🎯 MVN (Model-View-Notifier) pattern
• 🚀 Lazy initialization of notifiers
• 🔄 Optional autodispose for notifiers
• ⚡ State selection for optimized rebuilds
• 📦 Dependency injection with locator

State Management in 4 Steps #

1. Create an immutable UI state #

@MappableClass()
class ChromaCounterUIState extends MMState 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. 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}'),
  ),
);

3.2 (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,
  ),
);

4. Access the notifier upon user's actions #

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

Testing #

Widget Testing #

In tests, you can override the notifier with a mock notifier through the minimal manager:

testWidgets('should update UI when state changes', (tester) async {
  // Use the minimal manager to override the notifier
  counterManager.override(MockCounterNotifier.new);

  await tester.pumpWidget(const MaterialApp(home: ChromaCounter()));

  // Change state through the mock notifier
  chromaCounterManager.notifier.nextMetamorph();
  await tester.pump();

  final newColor = _getContainerColor(tester);
  // Test the exact color instead of a random one
  expect(newColor, equals(Colors.red));
});

See the example app tests for more testing examples.