State Management in Flutter

Flutter Status Management

As we explore Flutter, there comes a time when we need to share the state of the application between screens. There are many ways to do this, and we will cover several of them.

When you start working with Flutter and you come from an imperative framework (such as Android SDK or iOS UIKit), we should start thinking that the development of our applications will have a new perspective.

Why?

! Because Flutter is declarative. !

And in a moment we'll talk about what is declarative and imperative.

In Flutter, it's okay to rebuild parts of the UI from scratch instead of modifying them. Flutter is fast enough to do this, even on a frame-by-frame basis if necessary.

This section is optional !

Declarative and Imperative Programming Languages

---

Source: https://www.ionos.es/digitalguide/paginas-web/desarrollo-web/programacion-imperativa/

---

Imperative programming languages differ from declarative languages in one basic aspect: imperative programming focuses on the "how", and declarative programming focuses on the "what".

What do I mean by this? Imperative programming languages are so to speak step-by-step instructions written for the computer and explicitly describe which steps must be carried out in what sequence to finally reach the desired solution, while declarative programming directly describes the desired end result. ***So, let's imagine that imperative languages are the ones that provide us with the recipe for a meal and declarative languages are the ones that provide us with the pictures of the prepared dishes. This starts to make a little more sense, because from here you can start to predict how these two paradigms work.

Well, as an additional fact just for you to keep in mind, imperative programming is composed of:

• Structured, procedural and modular programming.

while the declarative programming is composed of:

• Logical and functional programming.

We also provided an example of imperative programming with PHP, but I will not go into detail, this was simply to understand the difference between these two because it could give us a better idea of how Flutter is composed so to speak.

Difference between ephemeral state and app state

---

Source: https://esflutter.dev/docs/development/data-and-backend/state-mgmt/ephemeral-vs-app

---

The state of an application is everything that exists in memory when the application is running. This refers to all the variables that Flutter maintains about the user interface, the state of animation, textures, fonts, etc. The states can be divided into two types: The ephemeral state and Application State (or Shared State).

Ephemeral State

• The ephemeral state (sometimes called UI state or local state) is the state that can clearly contain in a single widget.

Example:

Below, you can see how the currently selected element in a bottom navigation bar is held in the _index field of the _BottomNavigationBarWidget class. In this example, _index is an ephemeral state.

  class BottomNavigationBarWidget extends StatefulWidget {
  @override
  _BottomNavigationBarWidgetState createState() => _BottomNavigationBarWidgetState();
  }

  class _BottomNavigationBarWidgetState extends State<BottomNavigationBarWidget> {
    int _index = 0;

    @override
    Widget build(BuildContext context) {
      return BottomNavigationBar(
        currentIndex: _index,
        onTap: (newIndex) {
          setState(() {
            _index = newIndex;
          });
        },
        // ... items ...
      );
    }
  }

Other parts of the widget tree rarely need to access this type of state. There is no need to serialize it, and it does not change in complex ways.

In other words, no need to use state management techniques ("ScopedModel", "Redux", etc.) on this type of state. All you need is a "StatefulWidget".

Here, using setState() and a field inside the StatefulWidget class is completely natural. No other part of your application needs to access _index. The variable only changes inside the MyHomePage widget. And, if the user closes and restarts the application, you don't care if _index is reset to zero.

---

App State (Shared State)

State that you want to share across many parts of your app (sometimes also called shared state).

Examples of app states:

• User preferences.
• Login information.
• Notifications in a social networking application.
• The shopping cart in an e-commerce application.
• Status of read/unread items in an e-commerce application.