Stateless vs Stateful Flutter Widgets

Flutter widgets are the main building blocks of any flutter app. It won’t be wrong if we say, Flutter Apps are the combinations of various flutter widgets in a hierarchical structure.

Flutter is all about flutter widgets, combined in a hierarchical structure in order to create dynamic, interactive application.

Types of Flutter Widgets

Basically, there are two types of widgets provided by flutter. They are Stateless widgets and Stateful widgets.

Any flutter widget must belong to either stateless or stateful widgets.

What are Stateless Widgets?

Stateless widgets are immutable widgets, which once drawn or build cannot change their state or value during runtime. It means, these widgets cannot be re-drawn when the app is in action.

Stateless widgets have no state. So, if we want to redraw it, we will have to create a new instance of the widget and the previous instance will be destroyed.

Generally, these types of widgets are used to display some sort of information to the user rather than providing any interactivity.

How to create Stateless Widgets?

Technically speaking, so-called widget is just a class. So, we have to extend the appropriate class to create widgets.

In order to create stateless widgets, we must extend the class called StatelessWidget .

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp();
  }
}

In the above code, the build function is called only once, and by no means its called again during runtime.

Some examples of Stateless widgets are shown in the figure below:

Stateless Flutter Widgets
Stateless Widgets

What are Stateful Widgets?

Unlike stateless widgets, Stateful widgets are mutable widgets whose states changes most frequently during runtime of the app.

Stateful widgets are mutable, thus, can be drawn many times during runtime.

Generally, these type of flutter widgets are used to provide interactivity to the app. In other words, these widgets allow users to interact with it.

How to create Stateful widgets?

Stateful widgets are created by extending the StatefulWidget class provided by flutter SDK.

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Container(
      
    );
  }
}

Here in the above code, it overrides createState method instead of build method which returns instance of class _MyAppState.

Now, the _MyAppState class extends State class and take MyApp class as a template. _MyAppState class overrides the build method where we can define all the UI widgets.

Stateful widgets have their own lifecycle. They are created, repainted and destroyed according to their lifecycle.

So far, we have been saying that stateful widgets can be build any number of times throughout the life-time of the app. But, the question is How?

How can we call the build method of stateful widgets?

We can call the build method of a stateful widget by using setState method. This is the most useful method for these widgets which can be called any number of time to draw the widget again and again.

 setState(() {
      //your code here
    });

Some of the examples of stateful widgets are:

Stateful Flutter Widgets
Stateful Widgets

Summing Up

  • Stateless widgets are immutable widgets whereas Stateful widgets are mutable widgets.
  • Stateless widgets do not have lifecycle whereas Stateful widgets have.
  • Stateless widgets are mostly used to display information whereas Stateful widgets used to provide interaction to the user.

Now we have come to an end of this article. I hope you have learned something new. What do you think about this article? Please let me know in the comment section.

Happy Coding! 🙂