Managing State in Flutter

Contents

• Core Concepts
• Architecture and Data Flow
• Workflow: Selecting a State Management Approach
• Workflow: Implementing MVVM with Provider
• Examples

Core Concepts

Flutter's UI is declarative; it is built to reflect the current state of the app (UI = f(state)). When state changes, trigger a rebuild of the UI that depends on that state.

Distinguish between two primary types of state to determine your management strategy:

• Ephemeral State (Local State): State contained neatly within a single widget (e.g., current page in a PageView, current selected tab, animation progress). Manage this using a StatefulWidget and setState().
• App State (Shared State): State shared across multiple parts of the app and maintained between user sessions (e.g., user preferences, login info, shopping cart contents). Manage this using advanced approaches like InheritedWidget, the provider package, and the MVVM architecture.

Architecture and Data Flow

Implement the Model-View-ViewModel (MVVM) design pattern combined with Unidirectional Data Flow (UDF) for scalable app state management.

• Unidirectional Data Flow (UDF): Enforce a strict flow where state flows down from the data layer, through the logic layer, to the UI layer. Events from user interactions flow up from the UI layer, to the logic layer, to the data layer.
• Single Source of Truth (SSOT): Ensure data changes always happen in the data layer (Repositories). The SSOT class must be the only class capable of modifying its respective data.
• Model (Data Layer): Handle low-level tasks like HTTP requests, data caching, and system resources using Repository classes.
• ViewModel (Logic Layer): Manage the UI state. Convert app data from the Model into UI State. Extend ChangeNotifier and call notifyListeners() to trigger UI rebuilds when data changes.