flutter-managing-state

SKILL.md

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.