Flutter performance of StatefulWidget and StatelessWidget
Solution 1
StatefulWidget
is necessary for when the widget itself is maintaining its own state. In the example you gave, the Provider
package is handling the state for you, assuming you're using the correct provider type higher up the widget tree (for example, ChangeNotifierProvider
). There also doesn't seem to be anything in this code that would benefit from having access to the widget's lifecycle, so you wouldn't need access to methods like initState
or dispose
.
As such, there's nothing for the widget itself to manage, so converting your class to be stateful is unnecessary.
One thing I might suggest, though, is to use a Consumer
instead of calling Provider.of
directly. A Consumer
handles the call for you and removes any ambiguity on whether your widget will get updated when the Provider
detects a state change.
Solution 2
Keeping it simple:
- If you have non-
final
global variables in your widget then you need aStatefulWidget
- If all global variables are
final
then you should useStatelessWidget
;
Reason:
- If your global variable is non final that means it is allowed to change and if it's value is changed that means state of your object(Widget) is changed (basic oops concept I am talking about). In such case you would like to call build method of your widget so that your changes get applied on the UI (if it matters for your UI). We do it by calling
setState();
and so we useStatefulWidget
for such use-case. - If it is enough that once you initialize your global variable in constructor, you don't need to assign it any value in future then in such case use
StatelessWidget
.
I have tried to keep it very simple and not technical enough so, if you still have any doubts please comment on this answer.
Solution 3
You use StatelessWidget
for widgets that don't change their state, that will stay the same all the time. Example, appBar
is stateless.. The build(...)
function of the StatelessWidget
is called only once and no amount of changes in any Variable(s)
, Value(s)
or Event(s)
can call it again.
Therefore, when you need to change state(ex value) then use StatefulWidgets
, basically StatelessWidget
is used for building UI widgets that are static
Raffaele Rossi
Updated on December 16, 2022Comments
-
Raffaele Rossi over 1 year
I use a lot StatelessWidgets when I have to create "templates" of widgets that are used multiple times inside my app because the docs say so:
Stateless widget are useful when the part of the user interface you are describing does not depend on anything other than the configuration information in the object itself and the BuildContext in which the widget is inflated.
Here is an example:
class StepInputButton extends StatelessWidget { final int pos; final String value; const StepInputButton({ this.pos, this.value }); @override Widget build(BuildContext context) { return Row( // Text, Icon and a tiny button ); } }
The above is good because I can use
const StepInputButton(val, "val"),
in the code with CONST which improves performances.
PROBLEM
I am using the famous
Provider
widget to manage the state and the page of my apps usually look like this:class SuccessPage extends StatelessWidget { @override Widget build(BuildContext context) { var prov = Provider.of<Type>(context); return Scaffold(...); } }
That's a page of my app with Scaffold that has a Drawer, a float action button and an appTitle. Here I use a StatelessWidget because I do not use setState() since provider does all the work for me. But still in the official flutter doc they say:
For compositions that can change dynamically, e.g. due to having an internal clock-driven state, or depending on some system state, consider using StatefulWidget.
So do I have to change
class SuccessPage extends StatelessWidget
toclass SuccessPage extends StatefulWidget
? Do I get advantages?Note: if you want to put the question in another way: should I use StatefulWidgets to create "app pages" whose state is going to change and StatelessWidgets for "reusable widgets" whose state doesn't change?