Flutter App State Management

Disclaimer: I’m writing this article based on my understandings till now from various resources.

What is State?

Googled a lot of articles and concluding a simple definition of a state is to say something. 🤔🙄😯

I think I’m confusing your state of understanding about the state. I’m trying to say that the app is saying something by showing UI elements on the screen.

What is State Management?

State management is to modify the state on some action.

I would like to share a few analogies of state and state management as below:

In the designer standpoint, UI is the state. UX manages the state.

In the developer standpoint, Web page is the state & Web app manages the state.

In Flutter standpoint, Stateless Widget is the state & Stateful Widget manages its state.

How to manage a state is the hot topic in the current era of programming.

There are two approaches:

• The first approach is the Passive State Management where the state is managed by an external component. That means tightly coupled with an external component.
• The second approach is the Active State Management where the state itself managed by listening to the changes in an external component. That means lightly coupled with an external component.

That is how flutter is saying think declaratively from an imperative. An Imperative framework, implemented by an external source (i.e tightly coupled). A Declarative framework, declaring its state by hook up (observing or listening) to an external source (i.e lightly coupled).

You might get a doubt here…

How to Observe or Listen?

I’m trying to resemble this point with the SUN 🌞

In the world, everyone can see (observe) or feel (listen) the sun because always located above us i.e lifting the state up.

Lifting State Up

It makes sense to keep the state above the listeners.

In declarative frameworks, if you want to change the UI, you have to rebuild it. In Flutter, you construct a new widget every time it’s content changes. That means the old widget disappears and completely replaced by the new one.

Let’s talk about the challenges behind lifting the state up

How to identify the State?

I would like to explain this with the help of a flutter create counter app. In that, the floating button + increases the count value. That count value updates the text widget in the centre. That means the count value observable by the floating button as well as the text widget. So, the count value is our state.

How to lift the state up?

There are a lot of approaches for lifting the state up. For simplicity, I’m using the provider package approach.

Separating _incrementCounter() method as a Counter model with ChangeNotifier as shown below. ChangeNotifier is a class in flutter:foundation

class Counter with ChangeNotifier {  
   int value = 0;   
   
   void increment() {    
      value += 1;    
      notifyListeners();  
   }
}

notifyListeners() call all the registered listeners whenever an increment() method got called.

How to register as a listener?

ChangeNotifierProvider helps to register as a listener to the model by initializing the model in the builder as shown below.

void main() {
   runApp(
      ChangeNotifierProvider(
         builder: (context) => Counter(),
         child: MyApp()
      )
   )
}

child own Counter’s lifecycle. It’s a simple way to rebuild widgets when a model changes. Read Provider’s docs to learn about all the available providers.

I would like to conclude this page with modified main.dart and would like to share my observations out of it.

On enthusiasm, I compared the actual code with this and observed a few things which are mentioned below.

• No need for stateful widgets for the dynamic state. By decoupling the state, the whole app can maintain with stateless widgets which leads to better performance because the stateless widget is dumb and immutable.
• Stateless widgets are very simple, robust and scalable. It also encapsulates everything.
• By decoupling the state, we can achieve the TDD approach very easily, since the state is openly available for mock/override the value.

Hope this approach clarifies your state of understanding about the state and its management. If you found anything wrong, any doubts and suggestions please mention in the comments and reach me out on my email (ID: cbk2604@gmail.com).

I’m signing off, please follow me and clap your hands 👏 as many times as you can to motivate/encourage me to write more such articles.

Keep Smiling & Love Coding

Flutter Community