- Stateful widget<\/li>
- Stateless widget<\/li>
- Inherited widget<\/li><\/ul>\n\n\n\n
![\"Stateful](\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/flutter_widget-1024x595.png\")
Stateful Vs stateless<\/figcaption><\/figure>\n\n\n\n Stateless Widget<\/h2>\n\n\n\n
A stateless widget is like a constant. It is immutable. If you want to change what is displayed by a stateless widget, you’ll have to create a new one.<\/p>\n\n\n\n
Stateless widget are useful when the part of the user interface you are describing does not depend on anything other than the configuration information in the object itself and the BuildContext<\/a> in which the widget is inflated. For compositions that can change dynamically, e.g. due to having an internal clock-driven state, or depending on some system state, consider using StatefulWidget<\/a>.<\/p>\n\n\n\n
Stateful widgets<\/h2>\n\n\n\n
Stateful widgets are the opposite. They are alive and can interact with the user. Stateful widgets have access to a method named
setState<\/code>, which basically says to the framework “Hello, I want to display something else. Can you redraw me please ?”.<\/p>\n\n\n\nStatefulWidget<\/a> instances themselves are immutable and store their mutable state either in separate State<\/a> objects that are created by the createState<\/a> method or in objects to which that State<\/a> subscribes, for example, Stream<\/a> or ChangeNotifier<\/a> objects, to which references are stored in final fields on the StatefulWidget<\/a> itself.<\/p>\n\n\n\n
The framework calls createState<\/a> whenever it inflates a StatefulWidget<\/a>, which means that multiple State<\/a> objects might be associated with the same StatefulWidget<\/a> if that widget has been inserted into the tree in multiple places. Similarly, if a StatefulWidget<\/a> is removed from the tree and later inserted into the tree again, the framework will call createState<\/a> again to create a fresh State<\/a> object, simplifying the lifecycle of State<\/a> objects<\/p>\n\n\n\n
Inherited Widget<\/h2>\n\n\n\n
Finally, Inherited widget is a mixt of both worlds. It is immutable and stateless. But another widget (whatever it is) can subscribe to that inherited widget. Which means that when you replace your inherited widget by a new one, all the widgets that has subscribed to the old one will be redrawn.<\/p>\n\n\n\n
In the end, a stateful widget will usually be used as a Controller. A stateless widget will be used as a View. And the inherited widget will be your configuration file or your Model.<\/p>\n\n\n\n
Stateless widgets are immutable, meaning that their properties can\u2019t change \u2014 all values are final.<\/p>\n\n\n\n
Stateful widgets maintain state that might change during the lifetime of the widget. Implementing a stateful widget requires at least two classes: 1) a StatefulWidget class that creates an instance of 2) a State class. The StatefulWidget class is, itself, immutable, but the State class persists over the lifetime of the widget.<\/p>\n","protected":false},"excerpt":{"rendered":"
I am learning Dart\/flutter and trying to understand how Widgets system works and I found out some useful things, hope it helps you too. Actually There are 3 kind of widgets, not just 2. Stateful widget Stateless widget Inherited widget Stateless Widget A stateless widget is like a constant. It is immutable. If you want…<\/p>\n","protected":false},"author":14,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","_joinchat":[],"footnotes":""},"categories":[1,6331],"tags":[6203,6343,6342,6341],"class_list":["post-17347","post","type-post","status-publish","format-standard","hentry","category-sql","category-flutter","tag-flutter","tag-inherited_widget","tag-stateful_widget","tag-stateless_widget"],"_links":{"self":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/17347","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/users\/14"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/comments?post=17347"}],"version-history":[{"count":3,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/17347\/revisions"}],"predecessor-version":[{"id":17351,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/17347\/revisions\/17351"}],"wp:attachment":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/media?parent=17347"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/categories?post=17347"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/tags?post=17347"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}