flutter-state-management

SKILL.md

Implement MVVM and Unidirectional Data Flow patterns for Flutter state management.

Provides decision logic to differentiate between ephemeral state (local UI state via setState) and app state (shared state via MVVM and provider package)

Enforces strict separation of concerns: data layer (Repository as Single Source of Truth), logic layer (ViewModel extending ChangeNotifier), and UI layer (pure functions of immutable state)

Includes complete code examples for implementing the MVVM pattern with ChangeNotifier, provider injection, and Consumer widgets for targeted rebuilds

Establishes Unidirectional Data Flow constraints: data flows down from Repository through ViewModel to View; events flow up through ViewModel commands

flutter-state-management

Goal

Implements robust state management and architectural patterns in Flutter applications using Unidirectional Data Flow (UDF) and the Model-View-ViewModel (MVVM) design pattern. Evaluates state complexity to differentiate between ephemeral (local) state and app (shared) state, applying the appropriate mechanisms (setState, ChangeNotifier, or the provider package). Ensures that the UI remains a pure function of immutable state and that the data layer acts as the Single Source of Truth (SSOT).

Instructions

1. Analyze State Requirements (Decision Logic)

Evaluate the data requirements of the feature to determine the appropriate state management approach. Use the following decision tree:

Does the state only affect a single widget and its immediate children? (e.g., current page in a PageView, animation progress, local form input)

Yes: Use Ephemeral State (StatefulWidget + setState).

Does the state need to be accessed by multiple unrelated widgets, or persist across different screens/sessions? (e.g., user authentication, shopping cart, global settings)

Yes: Use App State (MVVM with ChangeNotifier + provider).

STOP AND ASK THE USER: If the scope of the state (ephemeral vs. app-wide) is ambiguous based on the provided requirements, pause and ask the user to clarify the intended scope and lifecycle of the data.

2. Implement Ephemeral State (If Applicable)

For local UI state, use a StatefulWidget. Ensure that setState() is called immediately when the internal state is modified to mark the widget as dirty and schedule a rebuild.