Flutter Tutorial:
Flutter Widgets:
Flutter Advance
Flutter REST API
Advanced Concepts
Wrap vs Builder vs OverBarFlow
Circular progress conatin Icon
Flutter State management Comparison
Flutter Database
Flutter Token Expired Handling
Flutter Provider
Flutter GetX
Flutter with Native
Flutter Tips:
Interview Questions
Flutter 100 Interview Questions
Stateless vs Stateful
There are mainly two types of widgets: StatelessWidget and StatefulWidget.
StatelessWidget:
A StatelessWidget is a widget that does not have any mutable state. Once it is built, it remains unchanged. Stateless widgets are immutable and cannot be redrawn with different data after they are created.
Example of a StatelessWidget:
class MyTextWidget extends StatelessWidget {
final String text;
MyTextWidget(this.text);
@override
Widget build(BuildContext context) {
return Text(text);
}
}StatefulWidget:
A StatefulWidget is a widget that can change its state during the lifetime of the widget. It is mutable and can be redrawn with different data. Stateful widgets are commonly used when the UI needs to respond to user interactions, data changes, or other events.
A StatefulWidget consists of two separate classes: the StatefulWidget itself and its associated State class, which holds the mutable state.
Example of a StatefulWidget
class MyCounterWidget extends StatefulWidget {
@override
_MyCounterWidgetState createState() => _MyCounterWidgetState();
}
class _MyCounterWidgetState extends State<MyCounterWidget> {
int counter = 0;
void incrementCounter() {
//SetState work in Stateful class
setState(() {
counter++;
});
}
@override
Widget build(BuildContext context) {
return Column(
children: [
Text('Counter: $counter'),
ElevatedButton(
onPressed: incrementCounter,
child: Text('Increment'),
),
],
);
}
}In this example, MyCounterWidget is a StatefulWidget, and it creates an instance of _MyCounterWidgetState, which is the associated State class. The counter variable is the mutable state, and the incrementCounter method updates the state using setState(). The UI is rebuilt whenever the state changes, reflecting the updated counter value.
| StatelessWidget | StatefulWidget |
| Represents widgets that don’t require mutable state. | Represents widgets that can change their state during the widget’s lifetime. |
| Does not have an associated state. | Has an associated mutable state object called State. |
| Accepts immutable properties via constructor parameters. | Accepts immutable properties via constructor parameters. |
| Rebuilds entirely when build() is called. | Rebuilds when the associated State object triggers a rebuild using setState(). |
| More efficient as it doesn’t incur the overhead of state. | May be less efficient than StatelessWidget as it manages state, potentially requiring rebuilding of the entire widget tree. |
| Static UI components, such as buttons, labels, and icons. | Forms, animations, interactive UI elements, and dynamic content that require frequent updates. |
Both StatelessWidget and StatefulWidget have their use cases depending on the requirements of your app.
If a widget doesn’t need to maintain any mutable state, it’s recommended to use StatelessWidget for simplicity and performance.
On the other hand, if a widget requires state changes over time, StatefulWidget paired with its associated State object provides the necessary mechanism to manage and update the widget’s state.
StatelessWidgets are useful for static content that doesn’t change, while StatefulWidgets allow for dynamic and interactive UI components that can update their appearance in response to events or data change
