Stateless & Stateful Widgets | Flutter Beginner Guide 2025

Learn about the differences between Stateless and Stateful Widgets in Flutter with a few real examples. Understanding when to use which type of widget. So let’s start.

What is the Stateless Widget?

We know StatelessWidget is a widget,  but it does not change any item’s data. It remains the same throughout its lifecycle. If you need to display specific information and don’t need to change any data, then StatelessWidget is perfect.

For example, static text, icons, or images, then use StatelessWidgets. When Flutter renders a StatelessWidget then it calls the build() method only.

class alertWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text("Hello, Tech Harvest BD!");
  }
}

Here, the text remains constant, no matter what happens in the app.  It will only change if you change it manually. If something is updated or deleted in the app, it will not affect anything.

What is the Stateful Widget?

Oh! StatefulWidget, one of my favorite widgets.
On the other hand, it is a dynamic widget. StatefulWidget can rebuild itself when its state changes, such as when a user interacts with a button, toggles a switch, or writes any text.

An important thing is that every StatefulWidget is divided into two parts:

• This widget itself (immutable)

• This State object (mutable and holds data)

Each time you press the button, the UI rebuilds with the updated count.

class StepCounterWidget extends StatefulWidget {
  @override
  State<StepCounterWidget> createState() => _StepCounterWidgetState();
}

class _StepCounterWidgetState extends State<CounterWidget> {
  int count = 0;
@override
Widget build(BuildContext context) {
    return Column(
      children: [
        Text('Count: $count'),
        ElevatedButton(
          onPressed: () => setState(() => count++),
          child: Text('Increase'),
        ),
      ],
    );
  }
}

Differences between StatelessWidget and StatefulWidget

Stateless Widget- App Splash Screen

Think about when you open the Instagram app, then the first thing you see is the logo screen for a few seconds, then the main app loads. That screen doesn’t change. The first screen just shows the logo and maybe a short text like “Welcome”.
In Flutter, this can be a StatelessWidget, because nothing updates, no user interaction, no data change.

class SplashScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Icon(Icons.camera_alt, size: 80, color: Colors.blue),
          Text("Welcome to Tech Harvest BD",
              style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold))
        ],
      ),
    );
  }
}

Stateful Widget- Like Button

Think of the heart icon on Instagram. When you tap it, the color changes (from grey to red), and maybe a counter increases.
That’s a StatefulWidget because it reacts to user action and updates UI instantly.

class LikeButton extends StatefulWidget {
  @override
  _LikeButtonState createState() => _LikeButtonState();
}

class _LikeButtonState extends State<LikeButton> {
  bool liked = false;  
@override
  Widget build(BuildContext context) {
    return IconButton(
      icon: Icon(
        liked ? Icons.favorite : Icons.favorite_border,
        color: liked ? Colors.red : Colors.grey,
      ),
      onPressed: () {
        setState(() {
          liked = !liked;
        });
      },
    );
  }
}

If you master this concept, you are already one step closer to writing clean, efficient, and professional Flutter apps.
You will learn the topics better when you practice them. So, of course, as soon as you learn something, you should start practicing, and then you can become a master in any subject.