Stateful vs Stateless Widgets in Flutter

Flutter is an open-source UI(User Interface) framework developed by Google for building applications for various platforms, including Android, iOS, Windows, and macOS. It allows developers to create high-performance apps using a single codebase, which means that code written once can be deployed on multiple platforms.

Flutter uses the Dart Programming language, which is developed by Google. In Flutter, we make components of the application using widgets. A widget acts like a building block used to construct the interface of an application. Everything that we see on the screen of a Flutter app is a widget. We make the user interface by composing widgets together in a tree-like structure. When something changes, such as the user interacting with the app or the app’s state being updated, Flutter automatically rebuilds the affected widgets to reflect the changes.

Widgets can either be Stateless or Stateful:

Stateless Widget: The widgets whose state cannot be updated once they are built are called Stateless Widgets. It is immutable, i.e. once a stateless widget is created, its properties or state cannot be changed and its internal data cannot be modified. They don’t have internal state variables that can change during the widget’s lifetime. Their appearance is completely determined at the time of their creation which makes it easy to combine them to create complex UI.

Here is an example of a stateless widget:

Stateful Widget: Stateful Widget is a widget whose state can be changed dynamically. It is mutable i.e. it has internal variable states that can update over time in response to changes. Stateful widgets are used when the visual representation of the widgets can change over time or when the UI needs to change in response to user interaction.