Understanding Stateless and Stateful Widgets in Flutter

Understanding Stateless and Stateful Widgets in Flutter

There is nothing much difference between a stateful and a stateless widget other than the ability to change when a user interacts with a component on the screen.
Stateless widgets are widgets that do not require mutable states. It describes part of the user interface by building a constellation of other widgets that describe the user interface more concretely.

 Icon(
      Icons.beach_access,
      color: Colors.blue,
      size: 36.0,
    )

Stateful Widgets are dynamic widgets. They can be updated during runtime based on user action or data change. They have an internal state and can re-render if the input data changes or if Widget's state changes.

   Checkbox(
      value: this.value,
      onChanged: (bool value) {
        setState(() {
          this.value = value;
        });
      },
   )

Differences Between Stateless and Stateful Widget

Stateless Widget:
Stateless Widgets are static widgets.
They do not depend on any data change or any behavior change.
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.
For Example Container, Text, etc are Stateless Widgets.

Stateful Widget:
Stateful Widgets are dynamic widgets.
They can be updated during runtime based on user action or data change.
Stateful Widgets have an internal state and can re-render if the input data changes or if Widget’s state changes.
For Example Checkbox, Radio Button, etc are Stateful Widgets

You can always find cool projects on my Twitter and LinkedIn Account

Did you find this article valuable?

Support Atuoha Anthony by becoming a sponsor. Any amount is appreciated!