What is the relation between stateful and stateless widgets in Flutter?

Question

A stateful widget is defined as any widget which changes its state within its lifetime. But it is a very common practice for a StatelessWidget to have a S

Answer 1

Stateless Widgets are static widgets. You just need to pass few properties before initializing Stateless Widgets. They do not depend on any data change or any behavior change. For Example. Text, Icon, RaisedButton are Stateless Widgets.

Stateful Widgets are dynamic widgets, they can be updated during runtime based on user action or data change. If a Widget can change its state during run time it will be stateful widget.

Edit 15/11/2018

Stateless Widgets can re-render if the input/external data changed (external data being data that is passed through the constructor). Because Stateless Widgets do not have a state, they will be rendered once and will not update themselves, but will only be updated when external data changes.

Whereas Stateful Widgets have an internal state and can re-render if the input data changes or if Widget's state changes.

Both stateless and stateful widgets have different lifecycle.

Answer 2

In simple words:

As we know every widget is a view in the flutter. Which has its own classes. When we use those classes we create an object of it. We give values to their different variables/properties. Ex. We are creating Text widget so we can give it String, Color, Font Size, Font family. So by giving this, we are defining its properties while creating it. Up to this point, Stateless or Stateful widgets are the same but,

When we want to change/update its properties(let's say String or Color) again and again afterward then it should Stateful widget.

And when we don't want to change its properties after defining the first time it is a stateless widget.

that means we care about data that widget holds/control/show.

So Stateless is data less and Stateful is data full.

Now if you define a class that is stateless that means this class doesn't care/have variables in it or say data in its own class i.e. class level but it could have another widget/class in it which cares about data i.e. it is Stateful. So it does not have any impact on each other.

Please correct me if I am wrong here.

Answer 3

What are Stateful and Stateless widgets?

TL;DR: A widget that allows you to refresh the screen is a Stateful widget. A widget that does not is Stateless.

In more detail, a dynamic widget with content that can change should be a Stateful widget. A Stateless widget can only change content when the parameters are changed and hence needs to be done above the point of its location in the widget hierarchy. A screen or widget containing static content should be a stateless widget but to change the content, needs to be stateful.

I found this relative content on an interesting medium story. You're welcome!

Answer 4

A StatelessWidget will never rebuild by itself (but can from external events). A StatefulWidget can. That is the golden rule.

BUT any kind of widget can be repainted any times.

Stateless only means that all of its properties are immutable and that the only way to change them is to create a new instance of that widget. It doesn't e.g. lock the widget tree.

But you shouldn't care about what's the type of your children. It doesn't have any impact on you.

Answer 5

Stateless : Widget state creates ONLY ONCE, then it can update values but not state explicitly. This is clear from there structure as well. That's why it has only one class which extends with StatelessWidget. So if I say, they can never re-run build() method again.

Stateful : Widgets can update their STATE (locally) & values multiple times upon event triggered. That's the reason, the implementation is also different. In this, we have 2 classes, one is StatefulWidget & the other is it's State implementation handler i.e. State<YourWidget>. So if I say, they can re-run build() method again & again based on events triggered.

Below diagram will help.

Answer 6

disclaimer :- started working on flutter from last week :)

stateless and statefull widget has his own lifecycle to create and update the UI. however you can use either stateless or statefull to render UI but practically statefull are more handy when ui is totally or partially dependent with the external data (like - rendering a list using api) whereas using stateless widget to render static ui like any input screen is a good practice.