Is it Stateful? Is it Stateless? A guide for choosing widget in flutter
Which one should I choose?
TL;DR : Default to stateless, convert to stateful only if needed, and use state management library for complex state
I used to face a dilemma when creating widgets in flutter. Should I create a stateful or stateless widget? If I create a stateless widget, what if it becomes a stateful widget later? I’ll give you some pointers about how I choose which widget to write in flutter.
1. Default To Stateless
If you don’t know which state you will create yet, then make it stateless first. It is easy to convert it, for example in vscode you can move your cursor to the StatelessWidget declaration, open quick fix panel (cmd + . in mac, ctrl + . in windows), then click “Convert to Stateful Widget.”
Stateless Widget is simpler, more readable than stateful widget. If down the line you want to create a state, then it is easy to convert it into a stateful one.
But be careful though, if you have a large widget, and you convert it into a stateful widget, then you might have some problem with perform.
2. Create Stateful Widget if It’s Small Enough
Stateful Widget can create performance issues if you are creating a large widget. The issues comes when you create stateful widget when there’s a large build function, for example. a build function that returns the whole screen that have a lot of widgets.
This is a no-no. Stateful Widget will re-render every widget that you have when your state changes. This is a good example for stateful widget, since its state, counter, is used throughout the Widget.build method:
While this is not a good implementation of Stateful Widget:
In the second example, the entire scaffold will be reloaded whenever the counter change. This is bad since the only widget that’s dependent on the counter is the column widget. The more complex the widget gets, the worse the performance will be.
An issue comes if you have a huge stateful widget that at first is small, but down the line it becomes a big widget. The stateful widget itself makes sense, but its children might be rebuild even when you don’t want it to. So how do you manage such widget?
3. Use State Management Library For Complex Huge Stateful Widget
Using a state management library will help you to separate your logic with your UI. It also helps that some state management library have the option to rebuild only a part of UI when your state changes. Bloc is one of the example.
Bloc is one of the best state management library for managing complex states. You can create a complex state and each state can communicate with each other. It also improves performance since a state change won’t rebuild the whole widget tree.
In bloc, each widget can listen to a specific property of the state. Say, if I have timer state with 3 properties, int counter, String isStarted, int duration. In a widget that only needs to rebuild when int counter is changed, you can add buildWhen and pass in prevState.counter != currentState.counter.
There are a lot of state management library out there, pick one that suits your project the most.
Hope this helps!
Conclusion: default to stateless, avoid huge stateful widget, use state management library for widgets with complex state.
Further Reading:
