Introduction to State Management in Flutter
In my last post I talked about how you can get started with Flutter by implementing a simple “Hello World” application. In this post we are going to tackle a very important concept in Flutter development, state management.
The state corresponds to the local data that a widget can hold which is available after the widget has rendered/refreshed. Whenever we set the state the build function of the widget is triggered, refreshing the user interface of the widget.
If you have worked with React then you should be familiar with setState and render. When you call setState, React automatically calls the render function updating the user interface.
In this article you will learn how to get started with Flutter state management by implementing a simple increment counter application.
Let’s get started :)
Implementation
We are going to start with our App widget and instead of adding state to the App widget we will move out the functionality to the “incrementCounter” widget. Check out the complete implementation of the App widget below:
The IncrementCounter widget is responsible for displaying the counter and the button associated with the counter. The implementation is shown below:
The widget will look as shown in the screenshot below:
We have used the Center widget to first center everything. Then we placed the Column widget inside the center widget. The column widget works like a CSS FlexBox which is adding items in a vertical (column) direction. The column widget contains the Text and FlatButton widgets. Now, let’s go ahead and implement the onPressed event of the FlatButton widget.
Now when you press the FlatButton it fires the _incrementCounter function. The underscore “_” in the function indicates that this is a private function and it will not be visible outside of this class. The _incrementCounter function increments the value in the _counter. You can use debugPrint function to print out the value on the console. The ‘$_counter’ represents string interpolation in Dart language.
We have also updated the Text widget to simply display the value of the _counter variable. If you run the app and press the button, you will notice that _counter is being updated but it never updates the user interface to reflect those changes. The reason is that after the value is being updated it is not automatically invoking the build function.
In order for this to work, we need to use the power of state. The way the state is implemented in Flutter is little weird. Instead of just inheriting out InrementCounter class from the StatefulWidget class, we need to create a separate class which will manage the state and also the build the user interface of widget.
I really hope Flutter team can find a way to utilize a single class to implement the state, instead of creating multiple classes. By moving the state management and user interface building in a state widget we are breaking the Single Responsibility Principle.
Check out the complete implementation of the IncrementCounter widget as well as IncrementCounterState below:
The IncrementCounter now inherits from StatefulWidget instead of StatelessWidget. The state is managed by IncrementCounterState widget. Inside the _incrementCounter function we call the setState function and increment the _counter. This causes the build function to execute again, updating our user interface and reflecting the updated value of the counter. Check out the demo below:
That’s it!
I hope you have enjoyed this article. If you want to support my work then check out my Udemy courses below.
