How To Distinguish Between Stateful And Stateless Widgets?
Flutter is made of widgets and allows you to use and reuse customizable widgets. You can develop an app from scratch using various widgets. Here are widgets; there are widgets. Flutter developers may already know about types of widgets. But if we talk about Flutter rookies, they are more likely to get lost in this widget forest.
That’s when I felt obliged to write a quick guide to know the difference between various widgets. Because when you build an app using a widget-based framework, knowing its core widgets can help a lot. You will know where to use which widgets, and that will lead you to create highly interactive apps.
Must-know widgets of Flutter
So, rookies, you must know that there are three types of widgets in Flutter: the Stateful widget, the Stateless widget, and the Inherited widget. While you write code on any screen, it either lies in a Stateful or Stateless widget. Simply put, Stateful and Stateless are a paramount part of Flutter app development.
Then, what are Inherited widgets for? An Inherited widget is a combination of both, Stateful and Stateless. You can use it to allow your child widgets to access data from the parent widget. Thereby, it saves you from the mess of passing data in widget trees. Ultimately, you don’t have to type the code in every class to pass the state down to its children.
Now let’s talk a bit about the State. Why? Because it underlies our paramount widgets — Stateful and Stateless.
The state of any widget is nothing but the data of the objects. The data is basically sustained by widgets properties at the time of its creation, meaning when it’s painted on the screen. The State is not static. It can also change during the lifetime of widgets when it is interacted with by the user. For example, when a CheckBox widget is clicked, a check appears on the box.
Now come back to the battle of Stateful Vs. Stateless widgets.
Stateful Widgets:
The way it sounds “full,” stateful widgets are fully capable of being altered. Such widgets are mutable and can be changed many times in their lifetime. In other words, the state of your app can change multiple times during its runtime with various sets of inputs, variables, and data. For example, when a user checks a checkbox or fills up a form, the state of that widget changes in the runtime.
Coming to the technical part: Stateful widget overrides the createState() and returns a State. You can use it when the UI of your app changes dynamically.
Classes that inherit “Stateful Widget” are immutable. But the State is mutable, which changes in the runtime when the user interacts with it.
Stateless Widget:
Unlike stateful widgets, stateless widgets do not change their state during the runtime. Stateless widgets are immutable, and you cannot change anything in variables, buttons, icons or retrieve data once they are built.
Stateless widgets do not have direct user interaction — for example, text, RaisedButton, Icon, Icon Button. When a user presses any of these buttons, there would be no change in these widgets’ properties.
In the technical part, a stateless widget’s basic structure Stateless widget overrides the build() method and returns a widget. You can use such widgets if your app’s UI depends on the information within the object itself.
Lastly,
Summing up with main differences between stateful and stateless widgets
Stateless widget:
- They are static widgets; they are updated during their creation only.
- It is not dependent on data changes or behavior changes.
- Examples are Text, Icons, or a RaisedButton.
- Doesn’t include a setState().
- It cannot be updated during the application’s runtime. An external event is necessary for the trigger.
Stateful widget:
- They are dynamic in nature.
- It is conditional and changes when the user interacts.
- Examples are Checkbox, RadioButton, or Slider.
- It has an internal setState().
- It can be updated during the runtime.
I hope the post helps you get going with the stateless and stateful widget in the Flutter app development. See ya!
