Introduction Flutter State Management

State management in Flutter is a hot topic. Many options available might be awesome, easy to use, or easily confused and lost when trying to pick the best solution that fits what you need. Let me share with you the options and can help you choose the best option for your project. Share with your friends before starting the project should read this article might help all of your choice the best architecture.

Before you know about state management in Flutter, all of you must identify what you need:

• Separate view logic from business logic
• Easy to understand
• Predictable and widely adopted
• Modular

Based on the constraints, these are the options that I will share:

• Using setState() and StatefulWidgets
• ScopedModel
• BLoC (Business Logic Component)
• Redux
• Redux_BLoC (Combine between Redux and BLoC)

All of the state management in Flutter always using state. In Flutter state separately into 2, local state and global state. Local State allows the widget to hold on to the data after the widget has been rendered again. For example, you can keep track of a list of news and update your user interface when new news is added/removed/updated/deleted.

This works great for the widget maintain the state but if you want to share the state with other components then the local state is not going to work. For example, when you want access shopping cart in an e-commerce application in several different widgets if you just using local state your cart cannot share with sibling widgets. However, you can pass the local state to the parent and then to the corresponding children. This can become very complicated if you are passing the state to a deeper nested child.

Global state to the rescue! The global state allows you to put data into a global object that can be accessed from any widget. No need to pass around the state between different widgets like a crazy person.

Result of Between Local state and Global State

State management

My recommendation using BLoC pattern for local state management and redux for supporting global state scope. Especially, if your app will be complex and growing.

SetState and StatefulWidget

Why not use setState() inside your widgets? setState() is great for quick prototyping and you will get fast feedback. It does not help to achieve our goals; view logic and business logic are all part of the same class, not following the Clean code principle.

ScopedModel

ScopedModel is a third party package for Flutter. With ScopedModel is a step in the right direction. ScopedModel using 3 elements there are model, ScopedModelDescendant, and ScopedModel.

Model is a class can hold data, lets us create our first model.

class CounterModel extends Model {
  int _counter = 0;
  int get counter = _counter;
  void increment() {
     _counter++;
     notifyListeners();
   }
}

In CounterModel, we have variable _counter that will hold every counter when pressing the button. And then in our widgets, we can use ScopedModelDescendant to react to every change in the model.

class CounterApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) { 
    return new ScopedModel<CounterModel>(
      model: new CounterModel(),
      child: new Column(children: [
        new ScopedModelDescendant<CounterModel>(
          builder: (context, child, model) => new Text('${model.counter}'),
        ),
        new Text("Another widget that doesn't depend on the CounterModel")
      ])
    );
  }
}

Before creating ScopedModelDescendant, need first create a ScopedModel widget, this will provide the model to the children that request it. ScopedModel will hand that model to our builder method and rebuild any time the CounterModel changes (that is after notifyListeners in the model).

Rather than using setState, ScopedModel better because ScopedModel can separate our business logic from our view logic, which is good. However it a few limitations of ScopedModel:

• If your model gets complex, it might be challenging to know when properly call notifyListeners() to avoid the unnecessary update
• The API exposed by The Model does not describe accurately the asynchronous nature of UI application in general

With all the information, I don’t recommend using ScopedModel if your application is hard to manage the state if your app is very easy to manage the state you can using ScopedModel.

In the second part, I will share using BLoC and Redux. Stay tuned with my first post. If all of you want to ask, I feel free to help you. Correct me if I’m wrong.

Part 2

You can clone my repository on public Github https://github.com/lukaskris/flutter_state_management/

Happy Learning