Stateful Widget vs Stateless Widget in Flutter

Flutter is an open-source front-end framework developed using Android and iOS applications with a single codebase.

What is Stateful widget

The state can be changed using the build() method. The state is going to be changed, so the state object calls setState(), and asks the framework to rebuild the widget again.

What is stateless widget?

The Stateless widget cannot change when the user interacts with the application. It always contains static data.

Why State is important?

For example, when you are creating a simple application, you will navigate to the login page to verify the account. Only then you will we be able to return to home page and use the application. If we use stateless widgets in your application, that cannot be changed; everything will be static. When you go for a stateful widget, you can add interactivity to the app and organize the data as required.

Step 1: Create application and warp with stateless widget

Step 2 :

Declare the bool variable and Create ListTile and like icon button inside the ListTile.

Step 3 :

Configure IsLike variable as change if user pressing the like button

isLike = !isLike;

Run the application and click the like button. If it is not reflected on the UI Part, then your changes are not rendered.

Step 4 : Wrap stateful widget

Create Stateful widget & apply SetSate() property button on pressed function, after that restart the application. It will get reflected on the icon as like and unlike.

Conclusion

Managing state in an application is one of the most important and necessary processes. When you are handling a global state that is shared across the app, setState() is not the right type. You have to use setState() only in the UI code’s clas. This means you can end up mixing business logic and UI, which hampers code quality. This is when you can go for state management and flutter facilitates a variety of state approaches, hope this blog helps in understanding the mechanism.