Learn Flutter - Stateless and Stateful Widgets in Flutter

Welcome to Learn Flutter tutorial. Last time I explained Hello World! App, where I said that I will explain Stateless and Stateful widgets in upcoming tutorials. Now, It is time to understand them.

We know that our App screen is never gonna be the same, it changes when the user interacts with it. That's why we need states or stateful widgets.

What is the state of an App?

So, If we talk in terms of UI, then a state is the screen you are seeing at a time. Nothing is changing. States of an App can be multiple, but only one exists at a time.

When the user interacts with the state, which is currently present, the state changes or another state comes. For example, when you click "like button" on the Facebook app, it becomes blue. So, when then button was white it was a different state, and when the button is blue it is different.

In a mathematical way, you can see it like UI is the function of state variable -

Now, let us understand in terms of Flutter programming-

Here in Flutter, everything is a widget, even App itself. So, every widget can have states.

State is an object which stores current info of your widget. This info can change, and whenever it changes, it changes the look of your UI. 

For example, initial white color of like button in the Facebook App. When the user clicks on the like button, first it stores the blue color in its state object. Then build() of the button widget is called and it becomes blue.

Now, I think you have an idea about States. It will help you to easily understand Stateless and Stateful widgets.

Stateless Widget in Flutter

As the name suggests, the widget which does not have a state is called Stateless widget. Wait... What do you mean by "does not have a state", a widget should have at least one state to exist. Well, maybe it should have, but the state should be constant. It cannot change when the user clicks or interacts with it.

You can define Stateless Widget like this-

This code will draw a 50x50 blue card in the top-left corner of the body if you assign MyCard's Object to body parameter in Scaffold widget like this-

body: MyCard(h:50,w:50)

Let's under the code-

We are creating a MyCard class, which is our custom stateless widget class. I am calling it a custom widget because we can use it as a normal(or standard) widget.

Line no 2 and 3:

Creating const constructor where its parameters are optional. Const constructor means, the constructor cannot have a body and all variables of that class should be final or constant.

You can see that I am not declaring parameters, and directly using this.h and this.w. It actually assigns passed arguments directly to those variables(w and h).

build() function:

It returns the widget for which we are creating a MyCard class. The Container widget in our code creates a 50x50 box. To make it look like a card, we have put the container widget in the Card Widget.

Stateful Widget in Flutter

Stateless widgets do not have states, whereas Stateful widgets have different states. Here state object stores current state info, when this info is changed, UI also changes.

Checkbox, Sliders, and Animation related widgets are stateful widgets. UI changes as we interact with them.

Let us understand Stateful widget by below code -

It will give the following output-

If you click on the count button, it will increment the number shown the right side to it by 1.

Now let me explain the code-

Why two classes? The main reason is Widgets in flutter cannot change or they are immutable. Since, our StatefulWidget is in hierarchy of Widget class, it is also immutable. But, the Stateful widget provides another way store mutable info.

createState() function: 

creates a mutable state object for the StatefulWidget. This state object will be used to store current info about UI. You can see in the code, it returns the object of _MyWidgetState class.

_MyWidgetState class:

 It extends generic State class, where you write the build function for stateful widget. It is mutable, so everything inside the class can be changed(or variable).

build() function:

It returns Row of two widgets - RaisedButton and Text.

Whenever the button is pressed, it calls _incrementFun() function. It is called at least one time when the App is executed.

setState() function:

In our code, _incrementFun() function calls it. Whenever the setState function is called, first of all, it runs the anonymous function given to it as an argument. After that build() function is called again to draw our widget with data updated by that anonymous function. 

All right, We have seen pretty much about stateful and stateless widgets. We will see more on widgets and everything else you need to know in the upcoming articles.

If you have any doubt, please ask me in comments. I am always here. We are going to cover the whole flutter in this tutorial series. So, stay connected with us by subscribing this blog.