Flutter state management approach

What is state

A state is information that can be read when the widget is built and might change or modified over a lifetime of the app. If you want to change your widget, you need to update the state object, which can be done by using the setState() function available for Stateful widgets. The setState() function allows us to set the properties of the state object that triggers a redraw of the UI.

Example :

• When the user first registers, the pages inside the app update according to userpreferences selected during registration.
• Once the user enters the app, they get a relevant questionnaire inside the app.
• After the user selects one questionnaire, the data related to this test is updated, such as wrong answers, time taken, etc.
• Once the user has completed the paper, they receive the scores and ranking.

Why state management is required

• State Management reflects the efficiency of the system and the care taken by developers to build that system so that every functionality and feature performs smoothly and precisely.
• State management helps to align and integrate the core business logic inside the application with servers and databases. Without proper state management burden on users will increase and that would certainly decrease the effectiveness of an application.

State management categorizes into two conceptual types, which are given below:

• Ephemeral State
• App State

Ephemeral State

• Whenever you need to change the state of a single page view which may contain UI controls or animation then it is considered as a local state. You can easily do that using the Stateful widget

App State

• Whenever you need to change the state of multiple widgets which are shared across your application then it is Share app State

List of Flutter State Management Approaches

• Provider
• Riverpod
• setState
• InhertiedWidget and InheritedModel
• Redux
• BLoC/Rx
• GetX
• MobX

SetState

Pros

• Very easy and straightforward to understand.
• A great way to handle ephemeral State.
• Ephemeral State is sometimes called UI State or local State. It’s the State you can neatly contain in a single widget

Cons

• Not a good way to handle things involving app State (Global State and parts of the State you want to persist between sessions).
• Using setState all over an app can become a maintenance nightmare very quickly because your State is scattered all over the place
• Usually used within the same class as the UI code, mixing UI and business logic, which breaks clean code principles. In a tiny app, this is no big deal but it becomes a concern quickly when you have more than just a couple of screens

InheritedWidget & Model

Inherited Widget that defines a context at the root of a sub-tree. It can efficiently deliver this context to every widget in that sub-tree

this is a very special type of Flutter state management method. In short, it defines data at the root of the sub-tree! Therefore, IW can transmit the data to all branches in the same sub-tree

InheritedModel is a different widget that empowers developers to define the sections and data that they need to rebuild in the descendants. Therefore, the dependents of inherited widgets are not rebuilt without any condition

Provider

• A wrapper around InheritedWidget to make them easier to use and more reusable.
• By using provider instead of manually writing InheritedWidget, you get:
• simplified allocation/disposal of resources
• lazy-loading
• a vastly reduced boilerplate over making a new class every time

Here, we need to understand three main concepts to use this library.

• ChangeNotifier
• ChangeNotifierProvider
• Consumer

RiverPod

Riverpod is a reactive caching and data-binding framework that was born as an evolution of the Provider package.

• catch programming errors at compile-time rather than at runtime
• easily fetch, cache, and update data from a remote source
• perform reactive caching and easily update your UI
• depend on asynchronous or computed state
• create, use, and combine providers with minimal boilerplate code
• dispose the state of a provider when it is no longer used
• write testable code and keep your logic outside the widget tree

Redux

Redux is a state management architecture built on a unidirectional flow of data following the separation of concerns, which means presentation and business logic. Since Redux separates various app parts, changes in the UI are much more simpler, and debugging is not a hassle. From synchronous app logic, this is the best state management

Pros:

• Unidirectional data flow
• Easy debugging
• Able to keep the 5 latest versions

Cons:

• Super excessive amount of codes need writing (boilerplate)
• Side effects of asynchronous works

Bloc/RX

The business logic component(BLoC) is a state management technique that helps developers extract data from a central place in the project. This is one of the most utilized Flutter state management techniques, as it is recommended by developers at Google.

Pros:

• Easy to test and reuse codes
• Separate UI from logic
• Better performance

Cons:

• Lots of codings
• Need to use streams in both directions

GetX

• GetX is a quick, stable, and light state management library in a flutter. There are so many State Management libraries in flutter like MobX, BLoC, Redux, Provider, and so forth.GetX is additionally a strong miniature framework and utilizing this, we can oversee states, make routing, and can perform dependency injection.State management permits you information transfer inside the application
• High performance
• Less code
• No code generation
• No unnecessary rebuilds
• Code organization is simple

MobX

MobX is a Flutter state management library. In addition, MobX gets reactive programming that is different to Stream/RxDart reactive to value.

Flutter integration for MobX that provides the Observer widget that automatically rebuilds based on changes to observable state

Pros

• Abstracts the mechanism of updating a component
• easy to connect the reactive app data with the UI.
• rapid prototyping

Cons:

• Only suitable for small apps