StatefulWidget and StatelessWidget in Flutter

Tram Ho

I. Introduction

When you build an app with Flutter, Widgets are indispensable, right? And two indispensable widgets are StatefullWidget and StatelessWidget. In this post I will share with you and these 2 widgets!

II. Detail

1. Widgets

  • Widgets are the foundation of Flutter, a widget that represents part of the user interface. All components such as text, image, button or animation, theme, layout, or even app are a widget. In Flutter, all widgets or interfaces are coded using dart

  • When a widget changes state, such as by user click or animation, the widget rebuilds itself to its new state. This saves developer time because UI can be described as a state functions. We don’t have to write extra code to only update the UI when the state changes.
  • Widgets are simply classes. Example: class Text. Well so, if linking these elements, we can imagine a Widget class that has properties that store and display the Widget’s information like this:

2. Build function

Do you know the familiar math formula y = f (x). It is a function, when we have the value of x, based on a function f we get the value of y. Whenever x changes, it gives us a new value of y, right. Flutter is similar, it uses a formula of:

UI = f (Data)

When the Widget Data changes, the UI will be updated according to the formula f.

You see when I click on that blue button, the UI is changed to show different numbers, right. Number 0, 1, 2, 3, … that is the Data of the Widget. That data is stored in a variable of type int. When Data changes it will change the UI according to the formula f.

Thus, we have visualized the Widget Data and the build function and the relationship UI = build(Data) . This is how Flutter works. We will go to the next definition of State .

3. What is State

Suppose now, you create a Widget yourself as a light bulb. What information will the light bulb have:

  1. The size of the bulb is of type int . This information never changes. For example, the bulb when produced is size 20, 10 years later, it will also be size 20, but it cannot grow or shrink over the years, unless it is smashed (Widget die) =))
  2. The color is displaying the Color light, the default bulb color will be yellow, but sometimes it will change to red, sometimes it will be blue. This is changeable information, it will change once every few milliseconds. If the light color does not change, it could be damaged (Widget die) =))

So this class I named BulbLightWidget has 2 properties: size (the size of the bulb) and currenLight (the color of the current bulb). The size variable has a value that does not change forever, so it will declare the final height , the variable currentLight can be changed by reassigning the new value should declare var currentLight or Color currentLight .

Thus, it is possible to divide the Widget’s data into two categories: Information that can be changed and information that cannot be changed.

And here is the simplest, most concise definition of State :

State is information shown on Widget that can change during the lifetime of the Widget

In that light bulb widget, that data currentLight is state because it can be changed. When it changes, the BulbLightWidget widget BulbLightWidget to rebuild another interface. For example currentLight = , the widget displays a red light. When currentLight changes to currentLight = , the widget must rebuild to display a green light. And the size is just normal data, not the state because it is always constant, the light bulb will forever be that big.

Okay, I understand that with Data, with a formula that is a build function, I will build the UI. When Data changes, the build function will be called back to update the UI (we call this the rebuild Widget). There are two types of widgets, StatefulWidget and StatelessWidget , each with a build function, but the way they call the build function to update the UI is different:

One is: StatefulWidget , the Widget itself will actively update the UI. Second: StatelessWidget , the Widget itself will passively update the UI, or in other words is forced to update the UI by another Widget. How is proactive, how is forced. We’ll come to the first way, to actively update the UI using the StatefulWidget .

4. StatelessWidget

Stateless widgets have no state. It does not accept change within it. As for the change from outside (parent widget), it will passively change accordingly.

This means that StatelessWidget merely receives data and displays it passively. Interacting with it does not generate any event for itself to re-render. If you have to render again, it is due to external influences.

So, it has nothing to do with State at all. It itself does not have a createState function, but instead is a build(BuildContext) function build(BuildContext)

For example, we can see some samples of Stateless widgets .

Considering the type of Text widget is to initialize in a constructor and the properties are usually to build the widget and display it on the screen

5. StatefullWidget

StatefulWidget is simply a Widget that has a CÓ State ie it has changeable data. When the state changes, it calls the build function again to rebuild the widget. Thanks to that, the UI changes.

Here is the structure of a StatefulWidget:

Initially, when initializing StatefulWidget , the build function was called the first time, and it received a default state to update UI: UI = build(default state) . Every time we call setState function, it will call build function again to update new UI = build(new state) : UI = build(new state)

Demo StatefullWidget

Here are the results:

III. Summarize knowledge

These are important knowledge in the article, I will summarize briefly as follows:

  1. Scene = f (Data) where f is the build function contained in each StatelessWidget or StatefulWidget . Flutter works according to that formula: When you change Data, the UI will be updated.
  2. State is the Mutable data of the widget, so State is the data of the Widget that can be changed.
  3. StatefulWidget is widget with State , while StatelessWidget is widget without State.
  4. StatefulWidget can actively update UI by calling setState function.
  5. Data in StatelessWidget cannot be changed, so if it wants to update the UI, you must ask the father of a StatefulWidget to change the data to help it and then pass the data down to it through the constructor.
  6. All data in the StatefulWidget and StatelessWidget classes must be immutable
  7. Use StatelessWidget as much as you can – your colleagues will love you.


Share the news now

Source : Viblo