What are Flutter app state and ephemeral state?

Types of state in Flutter

States in Flutter can be conceptually divided into two types:

Ephemeral state

Ephemeral state, also known as UI state or local state, refers to the temporary state within a particular widget or component. The state is limited to a particular widget and does not need to be shared across the entire application. We do not need to use state management techniques for Ephemeral states. It is because the widget is rebuilt in Flutter to reflect any change in the Ephemeral state. setState() method is commonly used to manage it.

Some examples of ephemeral states are:

Counter example: Imagine a simple counter application where a user can increment or decrement the count. The count value (t in this widget’s state) is an example of an ephemeral state. It is specific to that particular widget and doesn’t need to be shared across the app.
Form field values: When a user fills in fields in any form, the input data is an example of the ephemeral state. It is because the data is relevant only to that specific form.

App state

Data or information that persists throughout the application’s lifetime is said to be in the app state. This typically includes data that needs to be shared across multiple screens or components within the app.

App state is complex as the data is shared and accessed on different screens. In Flutter, state management can be achieved using InheritedWidget, Redux, and BLoC, etc.

Some common examples of app states are:

Login information: When a user logs into an application, the login information must persist throughout the application to continue the user session safely.
User preferences and settings: Settings chosen by the user, such as preferred language, theme (dark mode or light mode), font size, or any other customizations that apply globally within the app, constitute the app state.

Differences Between App State and Ephemeral State

	Criteria	App State	Ephemeral State
1	Scope	App state is global and persists through out the application.	Ephemeral state is local and exists only in specific widgets.
2	Management	App state is often managed by dedicated state management approaches	Ephemeral state is managed through local state management approaches directly within the widget.
3	Lifespan	App state has a large lifespan as it has to stay persistent throughout the application	Ephemeral state has a short lifespan as it is tied to the lifespan of the particular widget.

Coding example

Below is an executable coding example of Flutter. In lib/main.dart, the setState() method is used to update the _counter variable’s value when the floating action button is pressed. This demonstrates the management of the Ephemeral state within the _MyHomePage widget.

The SimpleApp widget’s configuration in the main() function sets up the MaterialApp with a specific title and theme. This configuration represents the app’s global state, defining properties that persist throughout the application’s life cycle, such as the theme data. This is an example of app state.

import 'package:flutter/material.dart';

void main() => runApp(SimpleApp());

class SimpleApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo - Simple web app',
      theme: ThemeData(
        // This is the theme of your application.
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo - Simple web app home page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);


  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

Coding example of App and Ephemeral state

Here is a brief explanation of the code above:

In lib/main.dart:
- Lines 5–18: Define a stateless widget SimpleApp as the root of the application.
  - Lines 10–14: Set the title and theme data for the MaterialApp widget.
  - Line 15: Define the initial route of the application as MyHomePage with a specified title.
- Lines 20–28: Define a stateful widget MyHomePage capable of holding a mutable state.
  - Line 27: Create and return a state object for the MyHomePage widget.
- Lines 30–38: Define the state class _MyHomePageState for managing the state of MyHomePage.
- Lines 41–65: Construct and return the UI layout for the MyHomePage widget.

Conclusion

In summary, there are two major states in Flutter. Ephemeral state refers to data that does not need to persist throughout the Flutter application. The ephemeral state is only limited to one widget. For instance, switches or toggles in the Flutter app are in the Ephemeral state because their values are specific to the widget only.

On the other hand, app state refers to data that needs to be persistent throughout the application. The best example of app state is the user authentication state. Information about whether a user is logged in or not is a crucial part of App state. It persists throughout the app and affects all parts of the application.

Free AI Mock Interviews

Coding Interview

Coding PatternsFree Interview

Gain insights and practical experience with coding patterns through targeted MCQs and coding problems, designed to match and challenge your expertise level.

System Design

YouTubeFree Interview

Learn to design a video streaming platform like YouTube by tackling functional and non-functional requirements, core components, and high-level to detailed design challenges.

Free Resources