Flutter State Management in PRO (2023)

What is State Management-

State management is a crucial aspect of building applications with Flutter, a popular mobile app development framework. State management in Flutter refers to the process of managing the data and the UI of an app. In Flutter, the UI is defined using a declarative approach, where the UI is described as a function of the current state. This means that any changes to the state should result in an update to the UI. Flutter provides several options for managing state in an application, including the use of setState(), InheritedWidget, and third-party packages like Redux and MobX. The simplest approach is to use setState(), which is a built-in method that updates the state of a widget and triggers a rebuild of the widget tree. InheritedWidget is another option for state management in Flutter. It allows data to be passed down the widget tree, eliminating the need to pass data through multiple layers of widgets manually. This can be especially useful for sharing data between widgets that are not directly related. Third-party packages like Redux and MobX offer more advanced state management options, including centralized state management and reactive programming. These packages can help to simplify the code and improve the performance of the application, especially for larger projects. Overall, state management is a critical aspect of building high-quality Flutter applications, and developers must carefully consider the most appropriate approach for their specific needs.

Why State Management?

State management is very important in application development. It centralizes all the states of various UI controls to handle data flow across the application. A proper state management can save a lot of computational overhead by avoiding rebuilding of unnecessary widgets.

🤔Thinks some declarative

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, you press that increment counter button), 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.

Types of state in flutter :

1. Ephemeral State

Ephemeral state (sometimes called UI state or local state) is the state you can nearly contain in a single widget. Example: on/off state of a switch widget.

2. App State

State that is not ephemeral, that you want to share across many parts of your app, and that you want to keep between user sessions, is what we call application state . Example: Add to Cart — count on dashboard and list on Cart List page.

Managing the State

Consider an e-commerce app, you added a product in cart and you want your orders screen (cart screen) or any screen where changes need to me made to update it’s state without calling setState() in that screen’s widget hierarchy.

Flutter SM Options…

1. Provider- https://medium.com/@subhashchandrashukla/flutter-provider-c9516d024c0
2. Bloc/Cubit- https://medium.com/@subhashchandrashukla/flutter-cubit-7a5b4d62f36
3. GetX- https://pub.dev/packages/get
4. Redux- https://pub.dev/packages/redux
5. Mobx- https://pub.dev/packages/mobx
6. Riverpod- https://medium.com/@subhashchandrashukla/riverpod-in-flutter-a4835aca9f17
7. SetState — StateFull widget state

setState() is a method that is used to update the state of a widget. When a widget's state changes, it triggers a rebuild of the widget, which allows the UI to update and reflect the new state. setState() is typically used in response to a user interaction or a change in some data source, such as a database or network request. To use setState(), you first need to define a callback function that updates the state. Within this function, you can use setState() to set the new state values.

8. InheritedWidget- widget state

InheritedWidget is a special kind of widget that allows data to be passed down the widget tree from a parent widget to its descendants, without the need to pass the data explicitly to each widget.

An InheritedWidget is defined by subclassing the InheritedWidget class and overriding its updateShouldNotify method. The updateShouldNotify method is called whenever the InheritedWidget's state changes, and should return true if the new state requires the widget's descendants to be rebuilt.

Here's an example of an InheritedWidget that provides a ThemeData object to its descendants: