Understanding Stateless and Stateful Widgets

#flutter #programming #mobile

There is really nothing much difference between a stateful and a stateless widget other than the ability to change when a user interacts a component in the screen.
Stateless widgets are widgets that does not require mutable state. 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,
    )

A 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
Get started:
https://docs.flutter.dev/get-started/codelab

Anticipate for more future posts like converting a prototype to a Flutter App