Flutter – StreamBuilder 邏輯與應用情境

Widget 邏輯 - 就記住一句話

The StreamBuilder widget connects to a Stream and asks Flutter to rebuild every time it receives an event using the given builder() function.
也就是說,每次收到新的 async 通知都會 rebuild 一次。(根據 builder function 行動。)

因此

只要有需要「即時性」更新畫面、有所反應,我們就會使用到 StreamBuilder。

小故事

和各位分享一個小故事,我曾聽聞 StreamBuilder 用在 Authentication。當下我思索了腦中 Authentication 的結構模樣,實在想不出為什麼身份驗證需要透過 StreamBuilder 這等即時性驗證的東西來完成。

透過 http request 也可以實現 Authentication 啊?
只要存取 Client Session 就可以知道使用者是否為登入狀態。

但問題其實也因此出現,http request 的身份驗證並不是即時性的,假設今天我是一個電商平台,當客戶在購物的情況下,身份驗證具有延遲性,當購買請求已經被處理,有人冒充我們的身份,他們就有可能透過我們的帳戶購買東西。

哦 ~ 因此,即時性身份驗證在某些場合些,就變得極具重要性。
使用 WebSocket(在 Flutter 中與 UI Widget 搭配變成 StreamBuilder) 建立即時性連線,並透過 Server Side Session 去判定使用者的狀態,自動在連線斷開後設為 Logout,就不用擔心被別人冒充了~

應用情境

Authentication

即時更新 UI

身份驗證「這件事」,具有「多種狀態」的變化:

  1. 正在驗證
  2. 驗證成功
  3. 驗證失敗

不同的狀態都可以有不同的呈現方式。
我們當然會希望不同的狀態都能及時反映在 UI 上,讓使用者了解目前發生了什麼事,這時候,即時性的通訊變得重要,也是 StreamBuilder 可以出場的地方  。

簡化程式碼

在傳統的身份驗證實現中,你可能需要在多處地方監聽身份驗證的狀態,並在狀態變化時更新 UI。

這可能會導致程式碼的重複和難以維護。
然而,使用 StreamBuilder,你可以將身份驗證的狀態和 UI 的更新放在同一個地方,大大簡化了程式碼。

即時通訊應用

在即時通訊應用中,如聊天應用,消息是實時傳遞的。StreamBuilder 可以監聽來自 WebSocket 或其他即時通訊協議的消息 Stream,並在新消息到達時更新 UI。

(我其實很好奇即時通訊應用為什麼有辦法在不運行他的情況下接收到 Notification,又可以在開啟 App 的情況下即時與對方聊天,或許是有做不同通訊的切換?)

實時數據更新

如股票應用,StreamBuilder 可以監聽數據源的 Stream,並在新數據到達時更新 UI。

用戶輸入和表單驗證

用於監聽用戶輸入的變化,並在輸入變化時更新 UI。

此外,它也可以用於實現表單驗證,即時反饋驗證結果。

與硬體互動

StreamBuilder 可以用於監聽來自硬體的數據,如藍牙或感測器數據,並在新數據到達時更新 UI。

網路狀態監控

StreamBuilder 可以用於監聽網路狀態的變化,並在網路狀態變化時更新 UI,提供即時的用戶反饋。

總結

記住一句話:
「當我們有『即時性』需求,無論是即時更動 UI,即時更新數據,即時監聽 XXX 狀態的變化等等,只要與即時相關,就有機會透過 “StreamBuilder” 去實現」。

肯定還有許多應用可以實現,就等各位去挖掘囉。

Leave a Comment

Your email address will not be published. Required fields are marked *