{"id":13220,"date":"2020-06-12T06:30:44","date_gmt":"2020-06-12T06:30:44","guid":{"rendered":"https:\/\/www.bacancytechnology.com\/blog\/?p=13220"},"modified":"2026-02-24T09:22:23","modified_gmt":"2026-02-24T09:22:23","slug":"the-battle-between-the-states-all-about-flutter-stateless-stateful-widgets-and-bloc-architecture","status":"publish","type":"post","link":"https:\/\/www.bacancytechnology.com\/blog\/state-management-in-flutter","title":{"rendered":"The Battle Between The States (All About State Management in Flutter &#038; Stateful Widgets, and BLoC Architecture)"},"content":{"rendered":"<style>\np{\n   width:100%;\n}\n<\/style>\n<p>All things you come across in Flutter are Widgets. Like Components\/Controllers in Ionic language, Activities in Android, or React Native Components, everything you create on your app screen is a Widget. So, Buttons, Checkbox, Radio, ListView, Drawer, Tabs, Grid, etc. that interact with the visual aspect of your application are widgets. <\/p>\n<p>From this blog\u2019s title, you would have made out that there are two types of Widgets in Flutter:<br \/>\nStateless &#038; Stateful Widgets.<\/p>\n<p>First, let us understand them: <\/p>\n<p>Stateless Widgets do not have a specific mutable state and are immutable, meaning when the app is in action, the stateless widgets cannot be redrawn. Hence, such <a href=\"https:\/\/www.bacancytechnology.com\/blog\/flutter-widgets\">Flutter widgets<\/a> do not have any internal state, and you can modify their state only when they are re-initialized. <\/p>\n<p>Text, Column, Row, Container, etc. are stateless widgets, and you need to pass some parameters while creating these widgets such as dimensions or decorations. The state of such widgets remains the same throughout the application lifetime. <\/p>\n<div id=\"attachment_13221\" style=\"width: 748px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-13221\" src=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/06\/Stateless-Widgets.png\" alt=\"Stateless Widgets\" width=\"738\" height=\"268\" class=\"size-full wp-image-13221\" srcset=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/06\/Stateless-Widgets.png 738w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/06\/Stateless-Widgets-300x109.png 300w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/06\/Stateless-Widgets-20x7.png 20w\" sizes=\"auto, (max-width: 738px) 100vw, 738px\" \/><p id=\"caption-attachment-13221\" class=\"wp-caption-text\">[A bare minimum Stateless Widget]<br \/><\/p><\/div>\n<p>On the contrary, Stateful Widgets have a mutable state, and you can draw them n number of times within their lifetime. Such widgets are dynamic, and you can modify their state without reinitiation. Learn <a href=\"https:\/\/www.bacancytechnology.com\/blog\/why-use-flutter-app-development\" target=\"_blank\" rel=\"noopener\">How To Build First Reusable Widget Using Flutter?<\/a><\/p>\n<p>Checkbox, Button, etc. are examples of stateful widgets that generally contain an inner value or data that determines their state. The state of the widget may change as a user selects an item of the checkbox or presses a button. <\/p>\n<div id=\"attachment_13224\" style=\"width: 780px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-13224\" src=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/06\/Stateful-Widgets-1.png\" alt=\"Stateful Widgets\" width=\"770\" height=\"496\" class=\"size-full wp-image-13224\" srcset=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/06\/Stateful-Widgets-1.png 770w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/06\/Stateful-Widgets-1-300x193.png 300w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/06\/Stateful-Widgets-1-768x495.png 768w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/06\/Stateful-Widgets-1-20x13.png 20w\" sizes=\"auto, (max-width: 770px) 100vw, 770px\" \/><p id=\"caption-attachment-13224\" class=\"wp-caption-text\">[A bare minimum Stateful Widget]<br \/><\/p><\/div>\n<p class=\"boxed bg--secondary\" style=\"border: 1px solid #c7c7c7; box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);\">You may also like to read;<a href=\"https:\/\/www.bacancytechnology.com\/blog\/best-flutter-libraries-tools-packages-and-plugins\" rel=\"noopener\" target=\"_blank\">Top Flutter Libraries, Tools, Packages and Plugins<\/a><\/p>\n<h2>Flutter State Management<\/h2>\n<p>The state of a stateful widget can vary at different stages during the app lifetime. On every action, you need to define the state of your stateful widget and reinitiate it. You can execute the same by assigning properties to the setState() method. <\/p>\n<p><strong>setState()<\/strong><\/p>\n<p>For a stateful widget, whenever you call this function, it triggers the build() function of the widget, which in turn redraws the widget. Ideally, you should call the setState() function under the onChanged property of the widget.<\/p>\n<p>Let us see a sample code where we imply state change for a checkbox:<\/p>\n<div id=\"attachment_13225\" style=\"width: 810px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-13225\" src=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/06\/setState.png\" alt=\"setState()\" width=\"800\" height=\"608\" class=\"size-full wp-image-13225\" srcset=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/06\/setState.png 800w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/06\/setState-300x228.png 300w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/06\/setState-768x584.png 768w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/06\/setState-20x15.png 20w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><p id=\"caption-attachment-13225\" class=\"wp-caption-text\">[Redrawing  widget using setState()]<br \/><\/p><\/div>\n<p>However, this method of widget redrawing has some drawbacks. Before we get to the issues, you need to understand the widget hierarchy in your flutter application.<\/p>\n<p><strong>Widget Elementary Tree<\/strong><\/p>\n<p>The following image will describe the scenario well. Your application will be categorized likewise. Now, for example, you want to change the state of a child widget when a parent widget is affected. <\/p>\n<div id=\"attachment_13226\" style=\"width: 628px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-13226\" src=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/06\/Widget-Elementary-Tree..png\" alt=\"Widget Elementary Tree.\" width=\"618\" height=\"420\" class=\"size-full wp-image-13226\" srcset=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/06\/Widget-Elementary-Tree..png 618w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/06\/Widget-Elementary-Tree.-300x204.png 300w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/06\/Widget-Elementary-Tree.-20x14.png 20w\" sizes=\"auto, (max-width: 618px) 100vw, 618px\" \/><p id=\"caption-attachment-13226\" class=\"wp-caption-text\">[Source: <a href=\"https:\/\/quickstartflutterdart.blogspot.com\/2019\/02\/flutter-what-is-widget-element-context.html\" rel=\"noopener\" target=\"_blank\">Blogspot<\/a>]<\/p><\/div>\n<p>In such scenarios, you will face the following two major problems:<\/p>\n<p><strong>Issue #1 Parent to Child Rendering<\/strong><\/p>\n<p>Ideally, when you execute a setState() function on a parent widget, it by-default runs all its child widgets, whether or not they are stateful widgets, or whether or not they are stateful widgets need to be redrawn. <\/p>\n<p>This way, all the child widgets are rendered irrespective of a need to state-change. So, you are unable to render a specific child widget, keeping the rest unchanged.<\/p>\n<p><strong>Issue #2 Child to Child Rendering<\/strong><\/p>\n<p>Imagine you want to change the state of one child widget when some action occurs on another child widget. Both widgets are in the same class and are rendered by one parent widget. In such a case, you will be unable to render a child widget from another. <\/p>\n<div id=\"attachment_15586\" style=\"width: 1034px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-15586\" src=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/06\/1_8HBdwXXDl68uoLgyijC32w-1024x576.gif\" alt=\"Child to Child Rendering\" width=\"1024\" height=\"576\" class=\"size-large wp-image-15586\" srcset=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/06\/1_8HBdwXXDl68uoLgyijC32w-1024x576.gif 1024w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/06\/1_8HBdwXXDl68uoLgyijC32w-300x169.gif 300w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/06\/1_8HBdwXXDl68uoLgyijC32w-768x432.gif 768w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/06\/1_8HBdwXXDl68uoLgyijC32w-1536x864.gif 1536w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><p id=\"caption-attachment-15586\" class=\"wp-caption-text\">[Source: Medium]<\/p><\/div>\n<p>Now, to overcome these barriers of the setState() method, and to enable MVC architecture for your Flutter application, there are some state management techniques.<\/p>\n<p>MobX, Scoped Model, Redux, and BLoC Architecture can help you solve the issue. <\/p>\n<p class=\"boxed bg--secondary\" style=\"border: 1px solid #c7c7c7; box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);\">However, Scoped Model and Redux again face primary issues relevant to boilerPlate, Scope, and data rendering.<\/p>\n<p>So, let me share the most reliable Flutter state management technique for the stateful widgets of your Flutter state management.<\/p>\n<h2>BLoC Architecture for State Management in Flutter<\/h2>\n<p>At their Google I\/O conference (2018), Paolo Soares and Cong Hui introduced the BLoC architecture pattern for Business Logic Component and applied it to the business logic between various Dart applications.<\/p>\n<p>Applying the BLoC architecture, you can keep the business logic of your application separate from the UI view by using Streams. In this manner, it enables an MVVM architecture for your app.<\/p>\n<p>However, BLoC is a logic and not an architectural theory, so you can choose any suitable architecture for your application and can still implement the BLoC logic for Flutter state management best practices.<\/p>\n<div id=\"attachment_13233\" style=\"width: 810px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-13233\" src=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/06\/BLoC-Architecture.png\" alt=\"BLoC Architecture\" width=\"800\" height=\"350\" class=\"size-full wp-image-13233\" srcset=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/06\/BLoC-Architecture.png 800w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/06\/BLoC-Architecture-300x131.png 300w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/06\/BLoC-Architecture-768x336.png 768w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/06\/BLoC-Architecture-20x9.png 20w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><p id=\"caption-attachment-13233\" class=\"wp-caption-text\">[Source: <a href=\"https:\/\/www.raywenderlich.com\" rel=\"nofollow  noopener\" target=\"_blank\">https:\/\/www.raywenderlich.com<\/a>]<\/p><\/div>\n<p>For understanding the BLoC architecture and flutter state management best practices, you will first have to know some notions.<\/p>\n<p><strong>Streams <\/strong>yield multiple values that are asynchronous events. Streams are similar to the Future that the dart: async package provides.<\/p>\n<p>You can consider <strong>Sink <\/strong>as the end from where you feed data in your application. <\/p>\n<p><strong>StreamController <\/strong>acts like the manager of both Stream and Sink. It coordinates your application functioning by handling the business logic under it. <\/p>\n<p><strong>StreamBuilder <\/strong>is yet another manager that observes StreamController and implements the state change in your app.<\/p>\n<p>Now, let us see how the BLoC architecture in Flutter state management works.<\/p>\n<div id=\"attachment_13234\" style=\"width: 551px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-13234\" src=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/06\/BLoC-architecture-component.png\" alt=\"BLoC architecture component\" width=\"541\" height=\"441\" class=\"size-full wp-image-13234\" srcset=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/06\/BLoC-architecture-component.png 541w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/06\/BLoC-architecture-component-300x245.png 300w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/06\/BLoC-architecture-component-20x16.png 20w\" sizes=\"auto, (max-width: 541px) 100vw, 541px\" \/><p id=\"caption-attachment-13234\" class=\"wp-caption-text\">[Source: <a href=\"https:\/\/medium.com\/@artemsidorenko\/bloc-architecture-in-flutter-a-modern-architectural-approach-and-how-we-use-it-at-jimdo-bea143b56d01\" rel=\"nofollow  noopener\" class=\"broken_link\" target=\"_blank\">Medium<\/a>]<\/p><\/div>\n<p>The above diagram depicts a simple flow of execution when a user interacts with your application. When a user clicks a UI component of your application, it sends an event (action) to the BLoC component. <\/p>\n<p>After that, the BLoC component interprets the action and executes the required business logic. It passes the state change of the destination widget that will show the results of his\/her action. <\/p>\n<p>Here, to understand the role of InheritedWidget in Flutter state management, you should read ahead.<\/p>\n<p><strong>Inherited Widget<\/strong><\/p>\n<p>To understand the concept of Inherited Widgets, we will take an example, and for that, you need to consider the following widget-tree structure:<\/p>\n<div id=\"attachment_13235\" style=\"width: 810px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-13235\" src=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/06\/Inherited-Widget.png\" alt=\"Inherited Widget\" width=\"800\" height=\"583\" class=\"size-full wp-image-13235\" srcset=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/06\/Inherited-Widget.png 800w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/06\/Inherited-Widget-300x219.png 300w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/06\/Inherited-Widget-768x560.png 768w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/06\/Inherited-Widget-20x15.png 20w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><p id=\"caption-attachment-13235\" class=\"wp-caption-text\">[Source: <a href=\"https:\/\/www.didierboelens.com\" rel=\"nofollow  noopener\" target=\"_blank\">https:\/\/www.didierboelens.com<\/a>]<\/p><\/div>\n<p>Suppose Widget A is a button widget (stateful) in our shopping cart example. Widget B is a text box widget (stateful) that changes state every time a user presses Widget A (button). Widget C<br \/>\nis also a text box widget (stateless), but that does not need to change state on button press. <\/p>\n<p>Here I have presented sample code for the above-illustrated shopping cart example.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/06\/illustrated-shopping-cart.png\" alt=\"illustrated shopping cart\" width=\"640\" height=\"121\" class=\"alignleft size-full wp-image-13236\" srcset=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/06\/illustrated-shopping-cart.png 640w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/06\/illustrated-shopping-cart-300x57.png 300w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/06\/illustrated-shopping-cart-20x4.png 20w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/06\/presses-Widget-A.png\" alt=\"presses Widget A\" width=\"643\" height=\"294\" class=\"alignleft size-full wp-image-13237\" srcset=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/06\/presses-Widget-A.png 643w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/06\/presses-Widget-A-300x137.png 300w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/06\/presses-Widget-A-20x9.png 20w\" sizes=\"auto, (max-width: 643px) 100vw, 643px\" \/><\/p>\n<p>Whenever a user adds an item by clicking on Widget A, the InheritedWidget _MyInherited is recreated.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/06\/InheritedWidget-_MyInherited.png\" alt=\"InheritedWidget _MyInherited\" width=\"638\" height=\"320\" class=\"alignleft size-full wp-image-13238\" srcset=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/06\/InheritedWidget-_MyInherited.png 638w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/06\/InheritedWidget-_MyInherited-300x150.png 300w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/06\/InheritedWidget-_MyInherited-20x10.png 20w\" sizes=\"auto, (max-width: 638px) 100vw, 638px\" \/><\/p>\n<p>MyInheritedWidget contains a list of Items. The static MyInheritedWidgetState generates the state of the context (BuildContext). <\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/06\/MyInheritedWidgetState.png\" alt=\"MyInheritedWidgetState\" width=\"640\" height=\"384\" class=\"alignleft size-full wp-image-13239\" srcset=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/06\/MyInheritedWidgetState.png 640w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/06\/MyInheritedWidgetState-300x180.png 300w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/06\/MyInheritedWidgetState-20x12.png 20w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/p>\n<p>Every time the user adds an item in the cart, the MyInheritedWidgetState rebuilds its state.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/06\/MyInheritedWidgetState-rebuilds.png\" alt=\"MyInheritedWidgetState \" width=\"640\" height=\"120\" class=\"alignleft size-full wp-image-13240\" srcset=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/06\/MyInheritedWidgetState-rebuilds.png 640w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/06\/MyInheritedWidgetState-rebuilds-300x56.png 300w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/06\/MyInheritedWidgetState-rebuilds-20x4.png 20w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/p>\n<p>This class builds a widget tree whose parent is the MyInheritedWidget class.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/06\/MyInheritedWidget-class..png\" alt=\"MyInheritedWidget class.\" width=\"637\" height=\"423\" class=\"alignleft size-full wp-image-13241\" srcset=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/06\/MyInheritedWidget-class..png 637w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/06\/MyInheritedWidget-class.-300x199.png 300w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/06\/MyInheritedWidget-class.-20x13.png 20w\" sizes=\"auto, (max-width: 637px) 100vw, 637px\" \/><br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/06\/widget-tree.png\" alt=\"widget tree\" width=\"637\" height=\"336\" class=\"alignleft size-full wp-image-13242\" srcset=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/06\/widget-tree.png 637w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/06\/widget-tree-300x158.png 300w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/06\/widget-tree-20x11.png 20w\" sizes=\"auto, (max-width: 637px) 100vw, 637px\" \/><\/p>\n<p>WidgetA is a RaisedButton component that invokes the addItem method of closest MyInheritedWidget on user-press.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/06\/RaisedButton-component.png\" alt=\"RaisedButton component\" width=\"642\" height=\"185\" class=\"alignleft size-full wp-image-13243\" srcset=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/06\/RaisedButton-component.png 642w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/06\/RaisedButton-component-300x86.png 300w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/06\/RaisedButton-component-20x6.png 20w\" sizes=\"auto, (max-width: 642px) 100vw, 642px\" \/><\/p>\n<p>The number of items in the shopping cart will be displayed in WidgetB, a simple text component. It takes the updated value of the cart-item from the closest MyInheritedWidget.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/06\/closest-MyInheritedWidget.png\" alt=\"closest MyInheritedWidget\" width=\"637\" height=\"165\" class=\"alignleft size-full wp-image-13244\" srcset=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/06\/closest-MyInheritedWidget.png 637w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/06\/closest-MyInheritedWidget-300x78.png 300w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/06\/closest-MyInheritedWidget-20x5.png 20w\" sizes=\"auto, (max-width: 637px) 100vw, 637px\" \/><\/p>\n<p>In the above sample code, Widget A and Widget B are rebuilt, and Widget C remains unchanged as there is no need for it to rebuild.<\/p>\n<h2>Take Away<\/h2>\n<p>Google\u2019s Flutter is an amazing language that has proved its wonders. Whether Stateless or Stateful Widgets, whatever type of app you want to create for your users, you would want the best of all Flutter app development company and Flutter state management best practices. At Bacancy, we have expert Flutter masters that can accomplish almost anything that any other language like Kotlin, Swift, or Java can achieve. <\/p>\n<p>Using the Flutter state management best practices, our proficient <a href=\"https:\/\/www.bacancytechnology.com\/hire-flutter-developer\" target=\"_blank\" rel=\"noopener\">Hire Flutter app developers<\/a> can build next-generation Android and iOS apps. Build high-quality, native, and sophisticated interfaces in no time with Flutter. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>All things you come across in Flutter are Widgets. Like Components\/Controllers in Ionic language, Activities in Android, or React Native Components, everything you create on your app screen is a Widget. So, Buttons, Checkbox, Radio, ListView, Drawer, Tabs, Grid, etc. that interact with the visual aspect of your application are widgets. From this blog\u2019s title, [&hellip;]<\/p>\n","protected":false},"author":34,"featured_media":13246,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"_lmt_disableupdate":"no","_lmt_disable":"","footnotes":""},"categories":[1364,1200],"tags":[],"coauthors":[1568],"class_list":["post-13220","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-application-development","category-flutter"],"acf":[],"modified_by":"Nisarg Bhavsar","_links":{"self":[{"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/posts\/13220","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/users\/34"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/comments?post=13220"}],"version-history":[{"count":3,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/posts\/13220\/revisions"}],"predecessor-version":[{"id":57881,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/posts\/13220\/revisions\/57881"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/media\/13246"}],"wp:attachment":[{"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/media?parent=13220"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/categories?post=13220"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/tags?post=13220"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/coauthors?post=13220"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}