State Management in Flutter
State
In this post, we are going to talk about State Management in flutter.
State or Current state is the data which our application show to us in a specific time
Flutter consists of elements which we describe as widgets.
Using these widgets we create or build screen of an application in flutter.During the lifecycle of widgets state changes. Every widget consumes data which changes by various input and output.That’s why the state of our application continuously changes.
What does State Management actually means?
State Management in flutter is actually a mechanism by which we can bind together various layers of an application which includes service layer, business layer and then UI layer.
If an application doesn’t depend on any data from backend only have UI layer we don’t need state Management in that case.In some applications we have so many layers and in some application only one.
When data flows during the lifecycle of an widget from one place to another, we see various state changes in an application,and to manage these changes in an application we use a process which is known as State Management. We use setState() method for state Management.
setState() method is an internal method of flutter used to notify build method that in our widget tree the state of a particular widget or element is changed. Then build method rebuilds itself again and we can see those changes in our application on display.
By using setState() we can manage the state but our screen is loaded again which consumes more memory and time and make our application slow and our application’s performance is affected.
To resolve this issue we use various State Management approaches i.e.
➤Provider
➤BLoC
➤Riverpod
➤GetX
Types of State Management
Ephemeral State
App State
Ephemeral State
It is used for State management in an widget,implemented using setState().Also known as UI State and local state.It is not used for entire application.Because using setState() method in entire application then whole widget tree rebuilds itself so it consumes so many resources and time which is not good for the performance of big projects.
App State
It is used globally in an application. Also we can use app state for different parts of an application. By using App state we can manage state of multiple parts of an application.
In this state we will use various approaches like Provider, Riverpod etc.
State Management Approaches
Provider
Why we need Provider:
- Great Performance.
- we can easily pass or send data between one widget to another or one screen to another.
- Refresh UI in real-time.
- Production level Application can be easily made using providers.
What is Provider?
By name Provider we can understand that it is providing something .In flutter, Provider provides or passes data between different widgets or different nodes of widget tree. A provides gives us a great and better way not only for providing data and handling data but for updating the UI of application or current screen. So Provider is an way to change or pass the data between UI or widget Tree.
List of Flutter Providers
- Provider
- Listenable Provider
- Value Listenable Provider
- Stream Provider
- Change Notifier Provider
- Multi Provider
- Future Provider
- Proxy Provider
- Change Notifier Proxy Provider
BLoC
BLoc means Business Logic Component.This component separated the Business logic of your application from UI Layer.
Event
Application inputs like tap on button to load image, text, or any other user input that an app want to receive.
How BLoC is used as State Management
Consider an application with an UI ,a BLoc Component and a data layer. In BLoC any action on the screen that can change the UI is called an event. The UI sends event to the BLoC as input upon every user action. BLoc processes event and it requests some data from data layer in order to process the event further. Data is then sent to the BLoC and then block after applying business logic produces a new state. After that BLoC sends the new state as Output to the UI and after receiving new state the UI gets re-rendered.
For example we have an app and user wants to search some image by giving the name of the image .User gives the name of Person icon image and he taps on search button, the UI sends the search image event to the BLoC with additional information like which image to download .BLoC analyses the event and he says that i want to download Person icon image from the data.And it requests the data layer for that image. And then the requested data i.e. the person’s icon image is provided by data layer to the BLoC. BLoC then produces a new state to the UI. On receiving the new state the UI layer is re-rendered with the new state value.
Inherited Widget
An inherited widget provides us a appropriate course of action to send data between widgets. If our app is small we can create a widget constructor but in case of huge app, sending data is very tough work specially for beginners. And also some widgets need data from parents widgets. For that we use inherited widget. We have used so many inherited widget in our application coincidentally for eg. MediaQuery.of(context) etc.
Syntax of Inherited Widget:
const Inherited Widget({ Key? key, required Widget child}): super(Key:key,child:child);
Riverpod
For state management we can use a library known as Riverpod. It is developed by Remi Rousselet who also developed providers. It fixes some of the limitations that provider have. In providers we got errors at runtime that our provider is not found but using Riverpod we can get those errors in compile time. In providers we have to register for every screen in multi provider array in main.dart where our application routes exists but in riverpod, providers were declared globally.
Advantages of Riverpod over Provider
- A Provider depends on BuildContext but Riverpod have no dependance on flutter.
- In Provider there are runtime exceptions but in Riverpod there is Compile safety ,we got errors at compilation.
- In provider there is no caching system but in Riverpod there is improved Caching system and it provides improved Performance.
- In providers we cannot dispose providers id not needed anymore but in Riverpod there is auto disposing possible.
GetX
GetX is an state management library in flutter that is rapid, secure and light. There are many State Management libraries in flutter like MobX, BLoC, Redux, Provider,etc.
GetX is an framework and by using this, we can look after states, make routes, and can perform dependency injection.
State management allows you for sending data inside the app. Information is passed at any point, the application’s state is updated and accordingly rebuilding the system.
We have three different types of management in GetX:
State Management:
There are two types of state management:-
- Simple State Manager: It will use GetBuilder function.
- Reactive State Manager: It uses GetX and Obx.
Route Management:
To make Widgets like snackbar and many more widgets we can use GetX in it because by using GetX you can gather these widgets without using context.
Dependency Management:
GetX has a simple answer for dependency management utilizing controllers. With the help of GetX, to get data from different Classes , we can use a single line of code.
Why use GetX?
GetX is a very simple and capable state management result for flutter. It is not only used for state management but also it is an mini framework.
In GetX you will get a feature to quickly develop applications to support multiple devices e.g. desktop, tablet, mobile etc.and it will give high performace by using few line of codes.