Stateless and Stateful widgets in Flutter
If you are working with flutter, you may have heard about stateful widget and stateless widget.
Introduction
In this article, I will tell you,
What is Stateless widget?
What is Stateful widget?
What is the difference between Stateful and Stateless Widget?
As you know in Flutter all the UI components are known as widgets.
The widgets which contain the code for a single screen of the app can be just of two types,
- Stateful
- Stateless
Let’s discuss about them,
What is Stateless Widget?
Stateless widgets are those in which you want to make a UI that does not need to be dynamically changed whenever you update any value bound to it.
Stateless widgets do not require mutable state. it is immutable.
For example : if you want to make a button whose title doesn’t need to change dynamically, then you can create a separate widget for a button as a Stateless widget.
The structure of a Stateless widget looks like this:
We create a Stateless widget by extending our class(FirstScreen) from StatelessWidget.
Here FirstScreen is a StateLessWidget and the each and every widget has to override the function called Widget build(BuildContet context) which returns one or more widgets.
So whenever FirstScreen is instantiated, it will call the build(...) function and draw the widgets returned by this function.
In Stateless widget, The “build(..)” function can be called only ONCE while the app is in action, which is responsible for drawing the widgets on to the device screen.
To redraw the StatelessWidget, we need to create a new instance of the Widget.
What is Stateful Widget?
A stateful widget have its own state .When a user interacts with it, it can change. Stateful widgets have a mutable state. they are mutable and can be drawn multiple times within its lifetime.
A stateful widget is dynamic, For example : it can change its appearance in response to events triggered by user interactions or when it receives data.
The structure of a Stateful widget looks like this,
The creation of StateFulWidget is a two step process. First, as with the case of StateLessWidget , we need to extend our class(FirstScreen) from StatefulWidget.
However, we don’t override the build(...) function in this class, instead, we override a function called createState(...) , which returns the instance of a class _FirstScreenState which is, in turn, extends from State<> and takes theStatefulWidget as a template input. It is this class which overrides the build(...) function and returns a widget. This is where you can define the UI of the app, which is Stateful.
As it is a Stateful widget you can call the build method any number of times, which will redraw the widgets on the screen.
Stateful widgets can redraw itself because it’s build(…) function can be called multiple times, but you need to make this call explicitly, by calling a function called setState(…).
Inside the StatefulWidget, whenever, setState(...) is called, it will automatically invoke the build(...) function again, which will trigger the redrawing of the widget with a new set of information.
What is difference between Stateful widget and Stateless Widget?
I think you all have got a basic idea of Stateful and Stateless widgets and how do they differ from each other.
