{"id":1054,"date":"2023-09-15T06:34:15","date_gmt":"2023-09-15T06:34:15","guid":{"rendered":"https:\/\/www.devopssupport.in\/blog\/?p=1054"},"modified":"2023-09-29T06:57:19","modified_gmt":"2023-09-29T06:57:19","slug":"state-management-in-flutter","status":"publish","type":"post","link":"https:\/\/www.devopssupport.in\/blog\/state-management-in-flutter\/","title":{"rendered":"State management in Flutter"},"content":{"rendered":"\n
\"\"<\/figure>\n\n\n\n

In\u00a0Flutter\u00a0<\/strong>everything is a\u00a0widget<\/strong>. A widget is\u00a0mostly\u00a0<\/strong>the Component on the Screen, like\u00a0Text<\/strong>,\u00a0Image<\/strong>, some\u00a0List,\u00a0<\/strong>or even screen. Below is the picture of some of the commonly used widgets<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Moreover, widget has its State<\/strong>\u00a0as well which is actually the\u00a0data\u00a0<\/strong>that is being used in building of widget, A text Widget may have String data in the state of to show that String on the screen.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Flutter uses the below equation\u00a0in fig(c)\u00a0to render the widget on the application screen. Where\u00a0f\u00a0is the build function of the widget, which defines how the widget would look like,\u00a0the state\u00a0is the\u00a0current state\u00a0of the widget, and\u00a0UI\u00a0is the actual output of the widget on the screen.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

However, once you define the widget and it is built, then you can not change the widget appear change d). For instance, you can not change the String in Text widget dynamically, since\u00a0widgets are Immutable, i.e.,\u00a0Unchangeable.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Though widgets are\u00a0unchangeable\u00a0Fig<\/strong> (d)<\/em>, but widget\u2019s state are\u00a0mutable,\u00a0changeable\u00a0Fig (e)<\/em>, these types of widget are called\u00a0Stateful widget<\/strong>,\u00a0<\/strong>and since Flutter is a\u00a0declarative Framework<\/strong>, whenever\u00a0the state of widget changes, the widget gets rendered again with the new state.\u00a0<\/strong>So changing the widget\u2019s state is indirectly same as changing the widget dynamically.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Flutter has two types of widgets\u00a0Stateful\u00a0<\/strong>widget, discussed above, and\u00a0Stateless\u00a0<\/strong>widget.<\/p>\n\n\n\n

Stateful widget <\/strong>is the widget whose state is mutable<\/strong>, thus you can change the widget appearance<\/strong> dynamically <\/strong>by changing the state of widget. Changing the widget state fig(f)<\/em>.<\/p>\n\n\n\n

setState()<\/h1>\n\n\n\n

In Stateful widget, whenever there is some change that occurs in the state, we call setState() method, available inside the Stateful widget. Calling setState tells the Framework that the widget\u2019s state is updated, and the widget should be rebuilt, hence it is rebuilt with the new state, see Fig (f).<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Flutter uses the below equation to render widget, and if there is some change in the state of widget, then again it uses the same equation and the same build function, which defines how widget would look like, but with a new state value to draw updated UI on the screen.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

On the other hand, Stateless<\/strong> widget is a widget whose state is immutable<\/strong>, thus you can not change the widget appearance dynamically <\/strong>in any way. So, they are used when we have static widget.<\/p>\n\n\n\n

State types.<\/h1>\n\n\n\n

Now if we make a Stateful widget, its state is only available to the widget itself. however, sometimes it is essential to have a common state between different widgets so that different widgets can use the same state data at the same time.<\/p>\n\n\n\n

Let\u2019s consider a short scenario. Say, if we are making a cart application in which a user can select products from the application and add them to the cart, and once He completes his shopping, he can navigate to the Checkout screen so that he can know and pay the bill.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Now as you can see in Fig (h), the cart, which is a list of selected products, is in the state of the Cart Screen widget, local to the widget. Now this Cart that is in the state of the Cart Screen widget is not available in the Checkout Screen widget, however, we need a Cart in the Checkout Screen as well for the calculation and making of bills.<\/p>\n\n\n\n

To solve this, we lift the state up to a widget which is the ancestor widget of all the widgets that are using that common state fig(i). This technique is called Lifting the state up.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

The State which is local to a widget or define in widget itself called\u00a0Ephemeral State\u00a0<\/strong>and the State that is common to different widgets is called\u00a0Global State\u00a0<\/strong>or\u00a0App State<\/strong>.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

So,\u00a0State Management\u00a0<\/strong>is all about managing the state, deciding which widget\u2019s state needs to be mutable (Stateful widget<\/strong>), and which needs to be immutable\u00a0(Stateless Widget)<\/strong>.\u00a0Calling setState\u00a0<\/strong>whenever there is a change in the state of widget, and deciding where to put state either in widget itself or in the common ancestor widget.<\/p>\n\n\n\n

That\u2019s the basics of\u00a0State Management\u00a0<\/strong>that you must learn and implement in order to master the art of\u00a0State Management,\u00a0<\/strong>because every advance state management like\u00a0Provider\u00a0<\/strong>,\u00a0BLoC<\/strong>, or\u00a0Redux<\/strong>, all implements, behind the scenes, the same thing, which we have discussed above.<\/p>\n","protected":false},"excerpt":{"rendered":"

In\u00a0Flutter\u00a0everything is a\u00a0widget. A widget is\u00a0mostly\u00a0the Component on the Screen, like\u00a0Text,\u00a0Image, some\u00a0List,\u00a0or even screen. Below is the picture of some of the commonly used widgets Moreover, widget… <\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1054","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/posts\/1054","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/comments?post=1054"}],"version-history":[{"count":1,"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/posts\/1054\/revisions"}],"predecessor-version":[{"id":1067,"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/posts\/1054\/revisions\/1067"}],"wp:attachment":[{"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/media?parent=1054"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/categories?post=1054"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/tags?post=1054"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}