Widgets in Flutter: Stateless and Stateful Widget

Each element on a screen of the Flutter app is a widget. Widgets are the basic building block of flutter applications. Basically said, widgets are pieces of your user interface. Text is a widget. Buttons are widgets. Check boxes are widgets. Images are widgets. The list just goes on and on.

⚡In fact, everything in the UI is a widget. Even the app itself is a widget!

💁‍♀️ Meanwhile, it is much more appropriate to consider a widget as a blueprint. These blueprints are used by Flutter to create the view elements internally and render them to the screen.

📌The widgets are broadly classified into two types:

1. Stateless Widget

2. Stateful Widget

Before understanding the comparison between a stateless and a stateful widget, it is essential to know what does state of a particular widget means.

State is any data or information used by your app. In Simple terms, the information about the objects that a widget’s properties (parameters) are holding at the time of creation is the widget’s state (when the widget is painted on the screen). Its condition may also alter when it is in use, for instance, pressing a raised button may cause its colour to change.

🔸 Stateless Widget:

Widgets that are stateless are those that are immutable, which means they don’t change. Throughout the duration of the widget, its features and appearance are unaltered. Stateless widgets simply cannot change their state while the app is running, which prevents them of being redrew while the app is running.

Examples: Icon, IconButton, and Text

We need to override the build() method, as seen in the code below, in order to create a Stateless widget.

🔸 Stateful Widget:

Stateful Widgets are the ones that change its properties during run-time. They are dynamic i.e., they are mutable and can be drawn multiple times within its lifetime. It can change its appearance in response to events triggered by user interactions or when it receives data.

Examples: Checkbox, Radio Button, Slider, InkWell, Form, and TextField are examples of Stateful widgets.

To create a Stateful widget, we have to override the createState() method, which returns the state of the widget.

◼ Overview of difference between Stateless and Stateful Widget