Flutter Widgets Explained: Stateless vs Stateful – What's the Difference?

Piyush Rajput · 01 Jan 2025 · 446 views

Flutter Widgets Explained: Stateless vs Stateful – What's the Difference?

Stateless Widget and Stateful Widget are the two primary types of widgets used in Flutter to build user interfaces. Below is a detailed explanation of the difference between flutter widgets, along with small examples for each.

1. Stateless Widget

• A Stateless Widget is immutable, meaning it cannot change once it’s built.

• Use it for static content that doesn’t rely on any dynamic updates or user interaction.

• The build method is called once when the widget is created.

Example:

import 'package:flutter/material.dart';
class MyStatelessWidget extends StatelessWidget {
  final String title;
  MyStatelessWidget({required this.title});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Stateless Widget Example"),
      ),
      body: Center(
        child: Text(
          title,
          style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
        ),
      ),
    );
  }
}
void main() {
  runApp(MaterialApp(
    home: MyStatelessWidget(title: "Hello, Stateless Widget!"),
  ));
}

import 'package:flutter/material.dart';
class MyStatelessWidget extends StatelessWidget {
  final String title;
  MyStatelessWidget({required this.title});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Stateless Widget Example"),
      ),
      body: Center(
        child: Text(
          title,
          style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
        ),
      ),
    );
  }
}
void main() {
  runApp(MaterialApp(
    home: MyStatelessWidget(title: "Hello, Stateless Widget!"),
  ));
}

Output:

This displays a static screen with the text Hello, Stateless Widget!. The text cannot be changed dynamically.

2. Stateful Widget

A StatefulWidget is mutable, meaning it can change over time.
Use it when your widget needs to respond to events, user input, or other state changes.
It consists of two classes:

The Stateful Widget class itself.
The associated State class, where the mutable state and logic are managed.

Example:

import 'package:flutter/material.dart';
class MyStatefulWidget extends StatefulWidget {
  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int counter = 0; // Mutable state
  void incrementCounter() {
    setState(() {
      counter++; // Updates the counter and refreshes the UI
    });
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Stateful Widget Example"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              "Counter Value:",
              style: TextStyle(fontSize: 20),
            ),
            Text(
              "$counter", // Displays the counter value
              style: TextStyle(fontSize: 36, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 16),
            ElevatedButton(
              onPressed: incrementCounter, // Increments the counter
              child: Text("Increment"),
            ),
          ],
        ),
      ),
    );
  }
}
void main() {
  runApp(MaterialApp(
    home: MyStatefulWidget(),
  ));
}

import 'package:flutter/material.dart';
class MyStatefulWidget extends StatefulWidget {
  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int counter = 0; // Mutable state
  void incrementCounter() {
    setState(() {
      counter++; // Updates the counter and refreshes the UI
    });
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Stateful Widget Example"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              "Counter Value:",
              style: TextStyle(fontSize: 20),
            ),
            Text(
              "$counter", // Displays the counter value
              style: TextStyle(fontSize: 36, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 16),
            ElevatedButton(
              onPressed: incrementCounter, // Increments the counter
              child: Text("Increment"),
            ),
          ],
        ),
      ),
    );
  }
}
void main() {
  runApp(MaterialApp(
    home: MyStatefulWidget(),
  ));
}

Output:

The app initially displays Counter Value: 0.
When you press the Increment button, the counter increases dynamically, and the UI updates to show the new value.

Key Differences Between Stateless and Stateful Widget

Feature	Stateless Widget	Stateful Widget
Mutability	Immutable: Cannot change after build	Mutable: Can change dynamically
Use Case	For static UI	For interactive or dynamic UI
Performance	Lightweight	Heavier due to state management
Rebuild	Rebuilt only when parent widget rebuilds	Can rebuild independently via setState

When to Use Stateless and Stateful Widget?

Use Stateless Widget for

Static screens like a logo, title, or informational text.
Widgets that don’t depend on any data that might change.

Use Stateful Widget for:

Interactive components like buttons, sliders, forms.
Screens that rely on state changes, such as counters, animations, or API responses.

Also read: 6 Reasons to Choose Flutter for Mobile App

Conclusion

Understanding the difference between Stateless and Stateful Widgets is essential for creating efficient and responsive Flutter applications. Whether you're working with static content or dynamic user interactions, choosing the right widget will enhance your app's performance and usability.

Have questions or need further assistance? Drop a comment below or reach out to us—our team is here to assist you on your Flutter journey!

Flutter Widgets Explained: Stateless vs Stateful – What's the Difference?

1. Stateless Widget

Example:

Output:

2. Stateful Widget

Example:

Output:

Key Differences Between Stateless and Stateful Widget

When to Use Stateless and Stateful Widget?

Use Stateless Widget for

Use Stateful Widget for:

Conclusion

Get in touch wit​h us!

Get in touch with us!