[Minimal Logo]

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 morphing widget. 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

Installation #

dependencies:
  minimal_mvn: ^1.0.0

State Management in 4 Steps #

1. Create an immutable UI state #

@MappableClass()
class MorphingWidgetUIState extends MMState with MorphingWidgetUIStateMappable {
  const MorphingWidgetUIState({
    this.backgroundColor = Colors.blue,
    this.count = 0,
  });
  final Color backgroundColor;
  final int count;
}

2. Create a notifier to hold your UI state #

class MorphingWidgetNotifier extends MMNotifier<MorphingWidgetUIState> {
  MorphingWidgetNotifier() : super(const MorphingWidgetUIState());

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

3. Rebuild the UI when state changes #

final notifier = morphingWidgetManager.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 = morphingWidgetManager.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: () => morphingWidgetManager.notifier.morph(),
);