Ephemeral and Application State in Flutter
State is data that an application needs to display appropriate content and function correctly. It is divided into two conceptual types: Ephemeral State and Application State. This article helps to distinguish between them.
Table of Contents
Ephemeral State
Ephemeral state, also known as UI state, refers to temporary data in a system that is lost or reset when a component is re-rendered or unmounted. Ephemeral state is local and short-lived, and doesn't require state management tools like Bloc.
Examples of ephemeral state include:
- input value of
TextField - current index of
NavigationBarorPageView - progress of animation
- locally filtered array
Best Practices
Check out these three rules:
- DO keep ephemeral state locally. Store UI-specific data (e.g., input values, selected indices) within the widget that needs it (using a
StatefulWidget). - DON'T overcomplicate – keep ephemeral state simple. For example, do not create a bloc that stores current index of a bottom navigation bar.
- DON'T rely on ephemeral state for business logic. For example, do not perform complex logic (e.g. network requests) in widgets.
Application State
Application State represents data that is essential to the functioning of the application. It has a broader scope and may persist over longer periods of time. This state is often shared across multiple components and requires a State Management Solution.
Examples of application state include:
- A list of posts fetched from the server in Twitter
- Logged in user details and profile
- Application-wide settings such as theme or language preferences
Application state is stored in a state management tool. Units of the state management tool, such as controllers, should be managed by stateful widgets that can create and dispose them gracefully.
For more information about Application State, see Designing State Management and Business Logic.
Architectural Insights
The ability to distinguish between state types can provide important architectural insights.
Consider the following example. You have a Home screen with tab bar and two tabs: Posts and Users. The Users tab has a "Show Posts" button that navigates to the Posts tab and applies a filter. Because the active index of the tab bar is stored in Home screen, you can't change it from the Users tab – the state of the TabBar is ephemeral.
