flutter-state-management
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 andproviderpackage) - 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,providerinjection, andConsumerwidgets 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).
- Yes: Use Ephemeral State (
- 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).
- Yes: Use App State (MVVM with
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.
More from flutter/skills
flutter-building-layouts
Builds Flutter layouts using the constraint system and layout widgets. Use when creating or refining the UI structure of a Flutter application.
10.6Kflutter-architecting-apps
Architects a Flutter application using the recommended layered approach (UI, Logic, Data). Use when structuring a new project or refactoring for scalability.
10.4Kflutter-animating-apps
Implements animated effects, transitions, and motion in a Flutter app. Use when adding visual feedback, shared element transitions, or physics-based animations.
9.6Kflutter-managing-state
Manages application and ephemeral state in a Flutter app. Use when sharing data between widgets or handling complex UI state transitions.
9.6Kflutter-theming-apps
Customizes the visual appearance of a Flutter app using the theming system. Use when defining global styles, colors, or typography for an application.
9.5Kflutter-implementing-navigation-and-routing
Handles routing, navigation, and deep linking in a Flutter application. Use when moving between screens or setting up URL-based navigation.
9.3K