Posted on Jul 8, 2022

Understanding Stateless and Stateful Widgets

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