Now that we know what State is and went over an example of a Stateful Widget, let’s go over the differences between Stateful and Stateless Widgets.
Since Stateless Widgets don’t have State, that means that these Widgets properties remain static. They only get built once, no matter how a user interacts with the Widget. Some examples of Stateless Widgets are the Icon, IconButton, and Text Widgets. Stateful Widgets, contain State which means their properties are dynamic and can be updated when they’re interacted with. When their properties are updated, the Widget gets rebuilt to reflect the changes. Examples of Stateful Widgets are the Checkbox, Radio, Slider, Form and TextField Widgets.
But where is State stored and how does the Widget know when to be rebuilt? Well, it turns out a Widget’s State gets stored in a State object. When the State changes, the object calls it’s setState function which tells Flutter to redraw the Widget.
The topic of State was a bit confusing to me when I first encountered it. However, after spending some time reading the docs and especially after writing about it, this has helped me understand it much better. I hope I was able to explain the concept of State well and how you may apply it to Flutter to add some interactivity in your apps. I’ve also linked some resources down below in case you need more explanation!
Sources:
- https://flutter.dev/docs/development/ui/interactive
- https://www.geeksforgeeks.org/difference-between-stateless-and-stateful-widget-in-flutter/amp/
