This time, we will explain the basics of screen images in Flutter, focusing on the overview and usage of StatelessWidget and StatefulWidget.
StatelessWidget and StatefulWidget
First, let’s understand what Widgets (StatelessWidget and StatefulWidget) are. Widgets are the classes in Flutter that represent elements on the screen such as buttons, text boxes, and other UI components.
Flutter uses Widgets to express the functionalities and design of an application.
Among Widgets, those that do not maintain state are called StatelessWidget, while those that do maintain state are called StatefulWidget.
What Does it Mean to Maintain State?
In an application, there are elements where the displayed information does not change and elements where the displayed information changes based on user interactions.
Elements where displayed information does not change
・Title bar
・Icons
・Read-only text fields, etc.
→ These do not change once they are drawn.
Elements where displayed information changes
・Counter display
・Login status
・Editable text fields, etc.
→ These are redrawn when their content changes.
Code Example for StatelessWidget
Below is the code for a StatelessWidget. It displays a specified text field at the center of the app.
The text field at the center does not change and is not redrawn.
Code Example for StatefulWidget
Below is the code for a StatefulWidget. It has a counter at the center of the app, and clicking a button on the app screen increments the counter by 1.
This counter dynamically changes its value each time the button is pressed. This is what it means to “maintain state”.
The state that a Widget maintains is referred to as State.
About StatefulWidget
Looking at the code for the StatefulWidget above, it consists of the MyApp class and the _MyAppState class.
MyApp class
This class is a StatefulWidget.
The MyApp class calls the _MyAppState class.
_MyAppState class
This class is called by the MyApp class.
It designs the main counter screen and manages the counter’s state here.
Only the _MyAppState class (State) is redrawn, while the MyApp class (StatefulWidget) remains unchanged once defined.
The MyApp class sets up and designs the static screen, while the _MyAppState class handles the dynamic redrawing of the screen.
About State Management
This time, we explained the change of a single state, but when creating an app, it is necessary to express various state information across multiple screens.
However, managing global states that are used across multiple screens is difficult with StatefulWidget.
Therefore, “Riverpod” is often used for easy global state management! For more information about Riverpod, please refer to the following article.
In Conclusion
State management is almost always necessary in apps, but it can be a bit difficult to understand for beginners since it involves the concept of the client side. I hope this article helps you understand it a little better. Thank you for reading until the end!