Importance of Flutter State Management

What is Flutter?
Build apps for any screen, Flutter transforms the app development process. Build, test, and deploy beautiful mobile, web, desktop, and embedded apps from a single codebase. (1) Flutter is to flap the wings rapidly. (2)
**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, radio buttons, 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. For example, a state managed UI control such as a button will be in the enabled state when input fields have valid input values and the button will be in the disabled state when the input fields are empty or have invalid values. As applications grow, this can end up becoming one of the most complex problems in user interface development. (3) Application state management is the process of maintaining knowledge of an application's inputs across multiple related data flows that form a complete business transaction - or a session - to understand the condition of the app at any given moment. In computer science, an input is information put into the program by the user and state refers to the condition of an application according to its stored inputs - saved as variables or constants. State can also be described as the collection of preserved information that forms a complete session. (4)
**Why is State Management necessary?
State management is essential in aligning and integrating core business applications and the cloud. Without some form of state management, business activities as routine as the purchase of something or a request for information would have to be structured as a single request or response exchange. This could put a significant burden on the user and would almost certainly reduce the effectiveness of the application. In some cases, such as the processing of an order, a stateless exchange could hide critical information like current stock levels, resulting in what could be a significant business impact on the seller and a major inconvenience to the buyer. (5) 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 the burden on users will increase and that would certainly decrease the effectiveness of an application. As well as by centralizing everything with State management, it will be easier to maintain a code base and will in-turn improve the code-quality and readability. (6)
**Flutter State Management
Here, Flutter has a different approach to state management. Unlike other frameworks, Flutter tries to rebuild the UI from scratch to reflect the latest changes in the state. Two Google developers from the Flutter development team, Filip Hráček, and Matt Sullivan have presented in a detailed way what pragmatic state management is in Google I/O 2019 conference.(7)
From imperative to declarative UI
There's a shift happening in how mobile apps are built - again. A few years ago, mobile developers moved from languages created in the 1980s and ʼ90s (think Objective-C and Java) toward more modern and expressive programming languages (Swift and Kotlin). Now, we're seeing a transition from imperative to declarative UI frameworks in the form of SwiftUI and Jetpack Compose. This promises to dramatically increase developer productivity, enabling us to build apps faster with less code. Declarative UI requires thinking about app development from a new perspective. Declarative UI requires thinking about app development from a new perspective, accepting that it's okay to rebuild parts of your UI from scratch instead of modifying them. Modern CPUs are fast enough to do so, and can even handle animations. In a declarative framework, changes in state trigger a rebuild of the UI, which removes a whole category of state-related bugs and makes it easier to reason about updates. You describe what the UI should look like for a given state, and the framework figures out how to do it using sensible defaults and context. This greatly reduces the amount of code you need to write and makes it easier to iterate.(9)
(10)Theory kinds of states
At any point in time of the flutter application lifecycle, your application will be in either of two below states :
a. Local / Ephemeral State
b. Shared / App state
(11)Local 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.
Shared App State
Whenever you need to change the state of multiple widgets which are shared across your application then it is Share app State.
Categorize of Flutter State Management ways

1. 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 devtool friendly - using Provider, the state of your application will be visible in the Flutter devtool a common way to consume these InheritedWidgets (See Provider.of/Consumer/Selector) increased scalability for classes with a listening mechanism that grows exponentially in complexity (such as ChangeNotifier, which is O(N) for dispatching notifications).(12)
2. setState You need to learn about stateful or stateless in Flutter and the difference between them to detect setstate but there are more wisdom state management ways such as provider.
3. Inherited Widget & Inherited Model An InheritedModel is a way of sharing data across your whole app, the same as InheritedWidget. An InheritedModel is a subclass of InheritedWidget, so it works the same in those instances, but adds some extra useful functionality. (13)
4. Redux
5. Fish Redux
6. GetIt
7. MobX At the heart of MobX are three important concepts: Observables, Actions and Reactions. (14)8. Riverpod Improvement over provider way of state management, A Reactive Caching and Data-binding Framework. (15)
8. GetX GetX is an extra-light and powerful solution for Flutter. It combines high-performance state management, intelligent dependency injection, and route management quickly and practically. (16)
9. BLoC pattern Bloc is a design pattern created by Google to help separate business logic from the presentation layer and enable a developer to reuse code more efficiently. (17) (18)

10. MVVM
    Writing maintainable and clean code requires strategies like segregating responsibilities into different layers. There are various software architectural patterns that streamline the code organization into separate layers like MVC, MVP, MVVM, etc. MVVM is quite a common design pattern in writing UI based applications in general. A Model-View-Viewmodel mainly concerns these layers:
    View: Responsible for visuals like UI elements on the screen
    Model: It can be a Repository that takes care of managing data across the services like Database, Network, etc
    ViewModel: It acts as a mediator to View & Model. The key responsibilities of this layer are in-taking actions, processing data and giving back the new state to the View layer.
    (19)
    Conclusion
    In this article, we talked about the definition of Flutter and the definition of State Management and its management in Flutter and about the most famous techniques used in State Management, their positives and negatives, and the door to development continues in this section because through State Management, Flutter technology is developed day after day to become a fierce competitor to the applications of the native over platforms.
    References

11. https://flutter.dev/

12. https://www.merriam-webster.com/dictionary/flutter

13. https://redux.js.org/

14. https://www.techtarget.com/searchapparchitecture/definition/state-management

15. https://www.techtarget.com/searchapparchitecture/definition/state-management

16. https://medium.com/dhiwise/7-things-you-need-to-know-about-flutter-state-management-42f840ef022e

17. https://www.youtube.com/watch?v=d_m5csmrf7I

18. https://docs.flutter.dev/development/data-and-backend/state-mgmt/intro

19. https://increment.com/mobile/the-shift-to-declarative-ui/

20. https://docs.flutter.dev/development/data-and-backend/state-mgmt/declarative

21. https://docs.flutter.dev/development/data-and-backend/state-mgmt/ephemeral-vs-app

22. https://pub.dev/packages/provider

23. https://flutter.institute/sharing-data-inheritedmodel-vs-inheritedwidget

24. https://mobx.netlify.app/concepts/

25. https://riverpod.dev/

26. https://pub.dev/packages/get

27. https://www.mitrais.com/news-updates/getting-started-with-flutter-bloc-pattern/

28. https://www.raywenderlich.com/4074597-getting-started-with-the-bloc-pattern

29. https://jayrambhia.com/blog/android-mvvm-intro