Stateful vs Stateless Widget in Flutter

Flutter is more about widgets. Before deep diving into other widgets, understanding the difference between Stateless and Stateful widgets is a baby step that one should take initially.

The main difference between a stateful and stateless widget lies in whether it changes its state after it is created.

Now let’s see those in detail.

Stateful Widget in Flutter

A stateful widget is one that can even change its state once it is created. In other words, it can change its state upon any user interaction.

Stateless Widget in Flutter

A stateless widget is one which cannot change its state once it is created. In other words, it doesn’t change its state upon any user interaction.

Now let’s see the above topics with real-life examples.

We have all seen the digital menu nowadays in most of the restaurants. And we would have also seen the traditional paper menu in the restaurants.

Take the modern digital menu as an example of a Stateful widget and the traditional paper menu as an example of a Stateless widget. 

The modern digital menu updates in real-time instantly as a new dish is introduced, there is a change in the price, and when the dish is not available. This is the best example of a stateful widget. It actively maintains its state and updates itself on the latest information.

Now, the traditional paper menu has been printed and distributed to the customers. If there is a change in the price or a new dish has been added, it doesn’t change dynamically; instead, we need to wait for the new menu to be printed. This is the best example of a stateless widget. It just displays the information based on the initial configuration. 

Example Code of Stateful Widget.

import 'package:flutter/material.dart';

class CounterWidget extends StatefulWidget {
  @override
  _CounterWidgetState createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State<CounterWidget> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text('Counter: $_counter'),
        ElevatedButton(
          onPressed: _incrementCounter,
          child: Text('Increment'),
        ),
      ],
    );
  }
}

The above widget is stateful because it can change its internal state (_counter) when the user taps the "Increment" button.

Example Code of Stateless Widget.

import 'package:flutter/material.dart';

class GreetingWidget extends StatelessWidget {
  final String name;

  GreetingWidget(this.name);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(16.0),
      child: Text('Hello, $name!'),
    );
  }
}

The above widget is stateless because it doesn’t have any mutable state; it simply displays a greeting based on the provided name.

So this is the main difference between stateful and stateless widgets.