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 StatefulWidget as one of its children. Doesn't StatelessWidget become stateful if it has StatefulWidget as one of its children?

I tried looking into the documentation as part of the code of StatelessWidget, but couldn't figure out how a StatelessWidget can have Statefulwidget as its children and still remain StatelessWidget.

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

Solution 1

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.

Solution 2

From the documentation at flutter.io:

...The important thing to note here is at the core both Stateless and Stateful widgets behave the same. They rebuild every frame, the difference is the StatefulWidget has a State object which stores state data across frames and restores it.

If you are in doubt, then always remember this rule: If a widget changes (the user interacts with it, for example) it’s stateful. However, if a child is reacting to change, the containing parent can still be a Stateless widget if the parent doesn’t react to change.

Solution 3

As mention in flutter docs

What’s the point?

Some widgets are stateful, and some are stateless. If a widget changes—the user interacts with it, for example—it’s stateful. A widget’s state consists of values that can change, like a slider’s current value or whether a checkbox is checked. A widget’s state is stored in a State object, separating the widget’s state from its appearance. When the widget’s state changes, the state object calls setState(), telling the framework to redraw the widget.

A stateless widget has no internal state to manage. Icon, IconButton, and Text are examples of stateless widgets, which subclass StatelessWidget.

A stateful widget is dynamic. The user can interact with a stateful widget (by typing into a form, or moving a slider, for example), or it changes over time (perhaps a data feed causes the UI to update). Checkbox, Radio, Slider, InkWell, Form, and TextField are examples of stateful widgets, which subclass StatefulWidget.

https://flutter.io/tutorials/interactive/#stateful-stateless

Solution 4

I can think of a very simple analogy. You have some piece of furniture with books, decorations, and a TV. The furniture is stateless, it does nothing doesn't move. In the TV, on the other side, you can turn it on, off, change channel, play a movie if it has some DVD attached, etc. The TV has a internal state which affects the way it behaves. In the furniture you have no state. The presence of the TV in the furniture is not adding a state to it. Hope this helps.

Solution 5

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.

View more solutions

Comments

[Shady Aziza]

You can compose your layout from different types of widgets, however that does not mean you are inheriting the characteristics of the composition to affect each widget. What I mean is you can have a Container that is stateless that has a child of another Container that is declared as StatefulWidget somewhere else, the state of the container will only affect this one component only. So, it is all about having a composition from different types of widgets, each function as you need them to.

[Rémi Rousselet]

To mess things even more, there's a 3rd type of widget : InheritedWidget ; Which can make StatelessWidget update.

[user462455]

(Relatively new to the framework). What is the difference between rebuild and repaint

[user462455]

Also from comments in flutter framework code, apparently StateFulWidgets are immutable too.

[Rémi Rousselet]

The build of a widget is basically a call to "build" method, followed by creating/updating the corresponding renderbox ; which is followed by the painting process. Which will print these renderboxes on screen.

[Rémi Rousselet]

classes that inherit "StatefulWidget" are immutable. But the state (State<YourWidget>) itself is mutable.

[Ian]

I note my stateless widget does get rebuilt, but I'm wondering if it's because it references a stateful widget ?

[Rémi Rousselet]

@Ian It probably depends on an InheritedWidget that got updated.

[CopsOnRoad]

Even after passing a new data from outside to Stateless widget we can change it too in run time but it is not called Stateful widget (in contrast to your last line).

[AlexPad]

@RémiRousselet There is a question I ask myself. In case you have a stateful widget that calls another stateful widget is right? We consider that they are both dynamic widgets. If I put two statefullwidgets one inside the other, the didChangeDependencies () would also be called up several times, so I could lose some control

[Isaiah]

This doesn't answer the asker's specific question.

[William Terrill]

This is a great analogy!

[Matt]

@RémiRousselet Stateful and stateless widgets both rebuild every frame, according to flutter.dev/docs/get-started/flutter-for/…

[user1596274]

Can you please explain how a Stateless widget can "be updated when external data changes"? (With "external data being data that is passed through the constructor".) Will the constructor not only be called once ever? How data passed through the constructor change?

[Roc Boronat]

I think the author meant the opposite :·D