We know everything is a widget in Flutter
The very first code while creating a new project in Flutter starts with two types of widgets: Stateless and Stateful.
- What is the difference between them?
- Why Stateless Widget has less line of code than Stateful Widget?
- Where do we use these two buddies? ๐
We will answer all that in this article. ๐ช
What we are going to answer in this article
- What are Stateless and Stateful widgets?
- How are they different from each other?
- How do they work?
Let's start
Stateless widget doesn't have any data that changes with time. It doesn't have any mutable state or internal state that updates on user interaction.
Stateful has the mutable state, which will change over time.
Oh wait! You said this is for beginners, but this is still not clear to me ๐ฆ.
Don't worry, everything is better with examples ๐ .
class MyApp extends StatelessWidget {
final String name = 'myName';
@override
Widget build(BuildContext context) {
return Text(name);
}
}
In the example, we used the Text Widget, which is a *Stateless widget.
In the above code, the name
field is marked as final because the value of name
will not change with user interaction.
You may have more fields in your app, now I'm taking only one to keep things basic.
In the case of Stateful widget, we have some fields that might change over time.
class MyHomePage extends StatefulWidget {
final String name = 'Suresh';
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int age;
@override
Widget build(BuildContext context) {
return Text('you are ${widget.name} and $age years old');
}
}
In the above code, we can see that there are two fields: name
and age
.
name
is immutable and it will not change but age can hence it is mutable.
How are we sure about this?
In Stateful widget, you can see that there are two classes.
One is simply a Widget
and another is State
Object
MyHomePage extends StatefulWidget
Widget
has the field name
, which is marked as final and State Object has the field age.
class _MyHomePageState extends State<MyHomePage>
The State is a super class which accepts a stateful widget as a type parameter: MyHomePage
This state object contains only those fields whose state may change.
Okay, I understand that age is mutable but who will change the internal state of age?
For this purpose, we drop the new Widget who can perform some action on user interaction. A button will be a good fit for this.
GestureDetector(
onTap: () {
setState(() {
age ++;
});
},
I have chosen the Gesture Detector, you can choose any from this widget library
The onTap
function is performing two actions here
- Updating the age field value
- Marking this field as dirty (changed) and calls the framework to rebuild its children.
In the process of rebuilding, Flutter creates the whole new widget with the new data and replaces it with the old one. This happens very fast so we generally see the old one gets updated.
So, that's all for this article. I hope this helped you understand how the state is managed in Flutter. Let me know what you want me to write next on Flutter in the comment section.
Feel free to connect with me on twitter