Stateful and Stateless Widget

To make any Dart class a Flutter widget, we have to extend that class. This class can extend either StatelessWidget or StatefulWidget abstract classes. These two widget classes come shipped with Flutter SDK. We’ll go over both abstract classes in detail.

State

The state is a change in our domain objects. Assume we are making an Instagram app in which we have a post domain object with fields like postedBy, createdAt, numberOfLikes, etc.

These fields together make up a state for this particular post object. Now suppose a follower clicks the “Like” button on this particular post. The numberOfLikes changes, so basically, the state changes. Whenever a state changes, we as a developer have two options—either to show the updated state (numberOfLikes in this example) or not to show it to the users.

Stateful and stateless widgets

Since we now have an idea of what a state is, we’ll learn more about StatelessWidget and StatefulWidget. Whenever we want to build a UI element on the screen that needs to be updated upon user interaction or if we want to change the state, use StatefulWidget. Otherwise, we use StatelessWidget.

If we always use StatefulWidget, then also we’ll be able to complete the app, but, we will suffer some decrease in performance. Stateless widgets are built only once on the screen, hence, it improves the performance of the app.

Example of StatelessWidget

Let’s see an example of a StatelessWidget.

Note: Please go through the comments in the code below to understand the widget better.

The app has a button that increments a count and displays that count on the screen.

The main() function is the entry point to the app. It calls runApp() with the root widget of the app, which is a MyApp instance.

The MyApp class extends StatelessWidget and overrides its build method to return a MaterialApp widget. The MaterialApp widget provides a default app structure and styles that follow the material design guidelines. It takes a title, theme, and home argument.

The home argument is a MyHomePage widget, which extends StatelessWidget and overrides its build method to return a Scaffold widget. The Scaffold widget provides a default app bar and a body. The body is a Center widget that contains a Column widget with two children: a TapMe widget and a ShowCount widget.

The TapMe widget is a button that, when tapped, calls the plusOne function. The ShowCount widget displays the count on the screen. The plusOne function increments the count and prints it to the console.

When we run the program above, we will see a TapMe widget written in the tap_me.dart file. Tapping on this will increase our state variable (that is, the count declared in the MyHomePage class). But since MyHomePage is extending a StatelessWidget, the effect of the count won’t be captured by ShowCount widget, and it will not be displayed.

Keep in mind, when we tap the TapMe button, the count variable does increase by one. It’s just that the MyHomePage will not call its build method again, and, hence, the ShowCount widget is showing the initial state of count, which is 0.

Example of a StatefulWidget

To make the MyHomePage widget build itself whenever the count increases, we have to extend StatefulWidget and wrap the function which is causing the state change in the setState function. Let’s see the updated code below.

Note: Please go through the comments in the code below to understand the widget better.