Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What difference between stateless and stateful widgets?

Tags:

flutter

I am learning Dart/flutter and trying to understand how Widgets system works. But I can't understand what difference between stateless and stateful widgets? For example I have button. What type it have?

Let's imagine two cases. I send text to button and it's display it. I send text to button and it's change color.

What will be if I will create not proper Widget type?

like image 706
Dmitry Bubnenkov Avatar asked Aug 29 '17 09:08

Dmitry Bubnenkov


People also ask

What is a stateless widget?

Stateless Widget: The widgets whose state can not be altered once they are built are called stateless widgets. These widgets are immutable once they are built i.e any amount of change in the variables, icons, buttons, or retrieving data can not change the state of the app.

What are stateful widgets?

A stateful widget is a widget that describes part of the user interface by building a constellation of other widgets that describe the user interface more concretely.

Can stateful widget contain stateless widget Flutter?

No, you can't, a stateless widget is an immutable widget that cannot react to state changes and rerender, you will have to use some form of state management.

How many types of widgets are there in Flutter?

Types of Widgets: There are broadly two types of widgets in the flutter: Stateless Widget. Stateful Widget.


Video Answer


3 Answers

There are 3 kind of widgets, not just 2.

  • Stateful widget
  • Stateless widget
  • Inherited widget

A stateless widget is like a constant. It is immutable. If you want to change what is displayed by a stateless widget, you'll have to create a new one.

Stateful widgets are the opposite. They are alive and can interact with the user. Stateful widgets have access to a method named setState, which basically says to the framework "Hello, I want to display something else. Can you redraw me please ?".

Finally, Inherited widget is a mixt of both worlds. It is immutable and stateless. But another widget (whatever it is) can subscribe to that inherited widget. Which means that when you replace your inherited widget by a new one, all the widgets that has subscribed to the old one will be redrawn.

In the end, a stateful widget will usually be used like a Controller. A stateless widget will be used like a View. And the inherited widget will be your configuration file or your Model.

like image 176
Rémi Rousselet Avatar answered Sep 20 '22 10:09

Rémi Rousselet


According to flutter.io:

Stateless widget

Stateless widgets are immutable, meaning that their properties can’t change — all values are final.

Here is doc.

Stateful widget

Stateful widgets maintain state that might change during the lifetime of the widget. Implementing a stateful widget requires at least two classes: 1) a StatefulWidget class that creates an instance of 2) a State class. The StatefulWidget class is, itself, immutable, but the State class persists over the lifetime of the widget.

As a example if you want to change text in text widget when a button press, you have to use StatefulWidget and it will let you to change the state of a variable.

But in StatelessWidget you cannot do that because it doesn't keep state.

Read more from doc.

This tutorial will help anyone who trying to understand these two.

like image 23
Blasanka Avatar answered Sep 23 '22 10:09

Blasanka


Check out the Flutter Interactivity Tutorial.

If your widget's build method depends entirely on its immutable constructor arguments, you should use a StatelessWidget because they're simpler. If you want to store some persistent private data that you expect to mutate over time, use a StatefulWidget and store the data on the State.

like image 42
Collin Jackson Avatar answered Sep 23 '22 10:09

Collin Jackson