The essence of interface updates in Flutter

I. Introduction

Hello friends, today we will learn and analyze how interfaces are built. Let's go .

II. Formula of interface

1. Interface and data

• An interface is a display element that the user can view, interact with, and recognize information and exchange information with the application/system.
• The basic components of the interface such as text (Text), images (Image), colors (Color), tables (Table) … are very many always.
• The above interfaces want to display meaningful, it needs content called data or in other words the interface depends on data.
  • Eg:
    • Text needs content, style
    • Image needs path
    • CheckBox needs checked or unchecked state
    • …

So we can derive the formula based on the mathematical formula:

y = f ( x ) y = f(x)

$$y=f(x)$$

• y : Interface
• x: Data

**⇒ Interface = f(Data) **

Variable data makes the Interface also change =))

So what is the function f here?

The arrangement of Widgets in Flutter together so that they appear on the screen is considered to be the creation of design tables, which act as the function f.

2. Update the interface

• As we know at a certain time we have certain data and a certain interface.
• In order for the interface to change, it is necessary to know the data that has changed.

The question is: How do I know if the data has changed?

In programming as well as in life, there are two ways for us to know when things change.

1. One is that we go and see for ourselves how the condition of the thing/thing is.
2. Second, there is *something coming to alert us to the state of the thing/thing.

Yah that’s right, in frameworks will be provided a way to refresh the interface when there is a change. (Although no refresh change is fine, it’s just a bit of a waste of resources hehe)

3. Declarative and Imperative programming

This part, I would like to explain based on my understanding and aspects of interface programming.

In Flutter programming, the way the UI is built depending on the State is called declarative. In some frameworks (like Android SDK or iOS UIKit…) it’s called imperative. (I personally call it the old way of programming interfaces, let me explain a bit.)

Regarding imperative:

Understand the following:

When you program an even interface such as displaying a piece of Text, to assign data to this Text we need to give this Text an id or some other way to identify this Text.

From the id we will get this Text object and from there using the setText function example to assign the value, the UI will be updated.

About declarative:

In Flutter the data that is displayed to the interface is called state. When we want to refresh the interface, we call the setState() function.

*note: if you don’t know what setState() is, you can go to flutter’s documentation to read it: Link

Wow look at the example, we can see that declarative doesn’t care about the location or identifier of the interface, it just needs to know how to call setState, then the interface is updated.

Some comments:

• 2 ways to design interfaces belong to 2 different schools.
• In terms of coding, declarative seems to be easier.
• But in terms of performance, imperative is better because it only changes where it needs to be changed.

Yah, but don’t worry too much about the performance because Google’s developers have done a great job in optimizing performance. Even so, settingState indiscriminately will affect the performance of the application, so it will generate a lot of state management such as Provider, Bloc, GetX, RiverPod, etc.

III. State Management

You can go to https://docs.flutter.dev/development/data-and-backend/state-mgmt/options to see recommended libraries.

Personally, I think each library has its own beauty. If you don’t follow a specific company/business/group request, you should experience as many libraries to make your own assessment.

Personally, I give some points as follows to evaluate:

1. Write more or less code/fast or slow
2. Is it easy to write according to your own programming thinking/thinking?
3. Is the code easy to decouple and extend?
4. Is it easy to maintain and fix bugs?
5. Does the library have a large/fast support community?

Actually, state management is not simply state management to rebuild the interface, but you should read and understand the mechanism and model that the library builds to have a deeper insight into programming.

IV. setState king of state management

The low-level approach to use for widget-specific, ephemeral state.

setState is the simplest way to refresh the entire interface in 1 State of StatefullWidget.

Like the mechanism in part II. 2 I mentioned in the library, deep inside it has a place to listen for data changes and when the data is listened inside it will call the setState function to update the interface.

Apply this mechanism to builder functions like BlocBuilder (Flutter_Bloc), GetBuilder, Obx (GetX), StreamBuilder, FutureBuilder, ValueListenableBuilder… these Widget classes are usually StatefulWidget. At the initState function (Usually initState) will create an event that listens to the passed data or *looks up the word (context, instance is saved somewhere). Here if new data arrives, the setState function will be called to refresh the interface of this builder.

Please dive into the code of the libraries to test what I mentioned.

Classes have listening mechanisms like Stream , ChangeNotifier, … or you can learn about observer design pattern to understand more deeply.

V. Summary

Through this article, I would like to introduce you to the basics of interface programming in general and Flutter in particular. Good luck with your programming.

Reference source:

https://ui.dev/imperative-vs-declarative-programming

https://docs.flutter.dev/development/data-and-backend/state-mgmt/intro