Flutter for Beginners: Stateless Widget vs Stateful Widget

In Flutter, everything is a widget. The Container that we learn in the previous part of the series is no exception. The widget is the building block of a Flutter application.

In this part of the series, we will learn how to create a widget as well as differentiate between a Stateless Widget and a Stateful Widget.


Series


The Stateless Widget

Let's start with the Stateless Widget first. A stateless widget is a widget that does not have any mutable state. It is immutable, meaning its properties and content cannot change after it is created. If you read the first part of the series, you are probably aware that MyApp is a Stateless Widget.

To create a Stateless Widget, we can create a class that extends the StatelessWidget class.

class MyStatelessWidget extends StatelessWidget {

}

After we extend the StatelessWidget class, it is required to implement a method called build. The method will return everything that we want to display on the screen.

import 'package:flutter/material.dart';

class MyStatelessWidget extends StatelessWidget {
  const MyStatelessWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return const Text("Hello");
  }
}

Your IDE will also probably suggest that you create a named 'key' parameter for your widget. To do that, simply add the parameter into the constructor like so:

const MyStatelessWidget({super.key});

We will talk about how to define parameters in the following section.

The Stateful Widget

The stateful widget is a type of widget that has a mutable state. A state can be used to control various things, such as how a widget is displayed. When the state of a Stateful widget changes, only the necessary parts of the widget are rebuilt, optimizing performance.

Remember that the first time we create our project using flutter create {app_name}, the generator will automatically create a counter app. This app is an example of how the Stateful Widget works.

The Stateful Widget is just a class that extends an abstract class called StatefulWidget. Like so:

import 'package:flutter/material.dart';

class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({super.key});

  @override
  State<StatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  @override
  Widget build(BuildContext context) {
    return const Text("Hello World");
  }
}

When we extend the StatefulWidget class, it is required to override a function called createState. The createState function is a factory method defined within a StatefulWidget that responsible for creating the corresponding State object associated with the widget.

As you can see, in the code above, the createState function returns a class named _MyStatefulWidgetState. This is the class where the build method is overridden, instead of in the widget class itself.

Updating the widget state

You may be still wondering, what it means by "the widget is supporting a state". Let's demonstrate how the state works. Instead of displaying hardcoded hello world text, let's display it from a variable instead.

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  String hello = "Hello World";

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        setState(() {
          hello = "Goodbye, World";
        });
      },
      child: Text(hello),
    );
  }
}

In the code above, we wrap the text around a widget named GestureDetector. GestureDetector is a widget that accepts events such as onTap, onLongPress, etc. In this case, when we tap the text we will change the text from "Hello World" to "Goodbye, World" by updating the hello state. Notice that we use setState method to update the state.

Text changed on tap.

Conclusion

I hope the explanation above is easy to understand. A Stateless Widget is a widget that doesn't have a mutable state, meaning the property cannot be changed. It only accepts parameters provided from the outside of the widget. On the other hand, a Stateful Widget is a Widget that has a mutable state. We can control the appearance of the widget using that state.

In the next article, we will learn how to provide parameters to a widget.