Flutter state management 🔥

Sup reader!! How have you been? we going to go through different state management approaches in flutter, for sure they are a lot of state managements in flutter. We are just going through some of them. 😚 .... Tadaaaa !!

What is state management?

State management refers to the management of the state of one or more user interface controls such as text fields, OK buttons, animations, etc. in a graphical user interface. In this user interface programming technique, the state of one UI control depends on the state of other UI controls.

State management is a complex topic. If you feel that some of your questions haven’t been answered, or that the approach described in this blog is not viable for your use cases, you are probably right 😂.

Why do you need state management?

Think of an app that has two separate screens: a catalog, and a cart (represented by the MyCatalog, and MyCart widgets, respectively). It could be a shopping app, but you can imagine the same structure in a simple social networking app (replace catalog for “wall” and cart for “favorites”). You need to keep track of items that a user added to cart or favorites, the total price in cart and many other things ... So to keep track of all these events you got to manage your state using one of the state management approach.

If you’re coming to Flutter from an imperative framework (such as Android SDK or iOS UIKit), you need to start thinking about app development from a new perspective.

Many assumptions that you might have don’t apply to Flutter. For example, in Flutter it’s okay to rebuild parts of your UI from scratch instead of modifying it. Flutter is fast enough to do that, even on every frame if needed.

Flutter is declarative. This means that Flutter builds its user interface to reflect the current state of your app:

When the state of your app changes (for example, the user flips a switch in the settings screen), you change the state, and that triggers a redraw of the user interface. There is no imperative changing of the UI itself (like widget.setText)—you change the state, and the UI rebuilds from scratch.

So what are different state management approaches in Flutter ?

1. Bloc

A predictable state management library that helps implement the BLoC (Business Logic Component) design pattern.
This design pattern helps to separate presentation from business logic. Following the BLoC pattern facilitates testability and reusability. This package abstracts reactive aspects of the pattern allowing developers to focus on writing the business logic. Bloc makes it easy to separate presentation from business logic, making your code fast, easy to test, and reusable.

Bloc was designed with three core values in mind:

• Simple: Easy to understand & can be used by developers with varying skill levels.

• Powerful: Help make amazing, complex applications by composing them of smaller components.

• Testable: Easily test every aspect of an application so that we can iterate with confidence.

You can use Bloc in flutter via flutter_bloc

2. Getx

A simplified reactive state management solution. It combines high-performance state management, intelligent dependency injection, and route management quickly and practically.

Three basic principles on which it is built:

• Performance: focused on minimum consumption of memory and resources

• Productivity: intuitive and efficient tool combined with simplicity and straightforward syntax that ultimately saves development time

• Organization: decoupling business logic from view and presentation logic cannot get better than this. You do not need context to navigate between routes, nor do you need stateful widgets

You can use Getx in flutter via Getx

3. Redux

Redux is a unidirectional data flow architecture that helps a developer to develop and maintain an App easily.

Here are 4 components that redux generally contains:

• Action: When an event is generated then it is represented as an action and is dispatched to the Reducer.

• Reducer: When Reducer gets any update, it updates the store with a new state what it receives.

• Store: When Store receives any update it notifies to the view.

• View: It is recreated to show the changes which have been made.

How to use Redux in flutter?

Before using Redux, you should know that flutter SDK does not have support for Redux but by using the flutter_redux plugin, it can be implemented.

4. Provider

Provider was created by Remi Rousselet, aims to handle the state as cleanly as possible. In Provider, widgets listen to changes in the state and update as soon as they are notified.

You can use Provider via provider

5. Riverpod

A Reactive Caching and Data-binding Framework. Riverpod is a popular Flutter state management library that shares many of the advantages of Provider and brings many additional benefits. According to the official documentation: Riverpod is a complete rewrite of the Provider package to make improvements that would be otherwise impossible.

Riverpod also has 3 basic principles:

• easily create, access, and combine providers with minimal boilerplate code

• write testable code and keep your logic outside the widget tree

• catch programming errors at compile-time rather than at runtime

You can use riverpod via riverpod

6. MobX

MobX is a battle tested library that makes state management simple and scalable by transparently applying functional reactive programming (TFRP).

The philosophy behind MobX is simple:

• Straightforward: Write minimalistic, boilerplate free code that captures your intent. Trying to update a record field? Use the good old JavaScript assignment. Updating data in an asynchronous process? No special tools are required, the reactivity system will detect all your changes and propagate them out to where they are being used.

• Effortless optimal rendering: All changes to and uses of your data are tracked at runtime, building a dependency tree that captures all relations between state and output. This guarantees that computations depending on your state, like React components, run only when strictly needed. There is no need to manually optimize components with error-prone and sub-optimal techniques like memoization and selectors.

• Architectural freedom: MobX is unopinionated and allows you to manage your application state outside of any UI framework. This makes your code decoupled, portable, and above all, easily testable

What's my preferred state management and why? 🤔

My preferred state management is bloc🔥 why ?

• Bloc is great for modularity and has an amazing documentation. Also Bloc has a bunch of extensions like bloc_concurrency, hydrated_bloc etc. That make things like caching, denouncing, throttling easy, in addition to that, error handling in bloc is amazing, you can use BlocObserver to capture changes, events or errors you can then plug Crashlytics or Sentry only in your observer and you’re good to go with logging.

• I have been also using bloc in a team of many people but it was interesting how all of us seamlessly worked within a single code base following the same patterns and conventions. 🤗

• Overall, Bloc attempts to make state changes predictable by regulating when a state change can occur and enforcing a single way to change state throughout an entire application.

These are some but you can find more on the Flutter. There are many state management solutions and deciding which one to use can be a daunting task. There is no one perfect state management solution! What's important is that you pick the one that works best for your team and your project.

Tadaaa!!!!