每日筆記

前言

今天有以下幾個主題:

  1. 上台報告的準備
  2. Flutter Learning

上台報告的準備

今天花了很多時間在處理簡報,以及練習如何報告。

簡報在製作時是一種資訊的主觀詮釋,要知道如何控制焦點,視覺上應該有反差點,反差點是想暗示的部分。
除此之外,當版面有點混亂時,可以先拿掉次要插圖、框下減少雜訊,再針對講解重點增強資訊。

Flutter Learning

Debugging

Debugging 可以分為 Breakpoints 和 Stack Trace,詳細的內容可以參考以下的影片。

State Management

接下來要進入 API Call 的部分,不過在實際進入之前,應該先好好了解一下「State Management」。

  1. 和 Android SDK or ios UIkit 不同,在 Flutter 中,我們可以重建部分 UI 而不是修改它。Flutter 有足夠的速度可以每次都做這件事(甚至每一個 frame)。
  2. Flutter is declarative. This means that Flutter builds its user interface to reflect the current state of your app
  3. 常理上來說,state 原指任何儲存在記憶體中的相關資料。但這樣的定義對於架構一個 app 幫助不大,因此較好的定義是:
    「Whatever data you need in order to rebuild your UI at any moment in time.」
  4. 在管理 State 時,要分清楚 app state(有時候叫 shared state)和 ephemeral state(有時候叫 UI state 或 local state)。
    1. ephemeral state: is the state you can neatly contain in a single widget.
    2. app state: State that is not ephemeral, that you want to share across many parts of your app, and that you want to keep between user sessions, is what we call application state.
    官方文件舉了很多例子,幫助我們理解哪些屬於 ephemeral state,哪些屬於 application state。
    但要記住:「There is clear-cut role.」
  5. 還記得之前做了一個可以按愛心的小範例,那時候就有特別使用 ChangeNotifier 來替 StatelessWidget 管理 state,所以其實我們可以單獨拉出來處理 stateless widget 的 state,也可以使用 StatefulWidget 直接 handle state。
    不過 StatefulWidget 算是比較高級的,它擁有完整的 life cycle 和 state management 機制,而 StatelessWidget 搭配 ChangeNotifier 的好處則在簡單和輕量化。
  6.  一開始學的時候可以先使用 provider。(除非有什麼強烈的理由要使用其他的,不然 provider 應該會是初學者開始的地方。)
  7. 先前忘了提,在處理 state management 的時候,有一個明確、清晰的 widget tree 是很重要的。
    雖然應該在一開始的時候就看,不過還是等這 API Call 這 part 結束再回去看唄!
  8. Flutter 不建議使用 modify 這類的方式去修改物件,它建議我們直接做 rebuild 的動作。(參考這篇文件
    原因應該和 Flutter 的 “Differential Rebuilding” (差異重建)機制有關。簡單來說,是 Flutter 框架只會重建有更動的 UI,不會只個介面重建。
    我在想,這應該是 React 那裡抄來的哈哈哈。印象中 React 也會去比對舊物件跟新物件,然後只更動需要更動的部分。
    如果框架會協助使用者做 Differential Rebuilding,那確實在寫程式時使用者直接使用建構新 Widget 的方式會比較快,而且好寫、方便管理。
  9.  Provider 底層的是 InheritedWidget, InheritedNotifier, InheritedModel 之類的東西,我們完全可以用這些 low-level widget 做到同樣的事。但 provider package 幫我們處理好了,可以先使用 provider 即可。
  10. ChangeNotifier 會提供 change notification 給它的 Listener。所以只要有個東西是 ChangeNotifier,我們就可以訂閱它,接收更動通知。
  11. *補充:
    在Dart中,使用final關鍵字聲明的變量表示該變量的「引用」是不可更改的,即你不能將它指向另一個對象。這意味著你不能對final變量進行重新賦值,但你仍然可以修改該對象本身的內部狀態(如果該對象是可變的)。
    像是 List, Map 或自定義的類,其內部可變。但如果宣告一個整數,是無法對他重新賦值的。
  12. ChangeNotifier 算是 Flutter:foundation 的一部分,它沒有 depend on 其他 high-level classes in Flutter。
    要對他做 Unit Test 也算容易,可以參考這篇文件
  13. ChangeNotifierProvider 置放的位置最好剛好在需要的地方(所有會用到 ChangeNotifier 的子孫的上層),才可以避免 pollute the scope。
  14. “We must specify the type of the model that we want to access. In this case, we want CartModel, so we write Consumer<CartModel>. If you don’t specify the generic (<CartModel>), the provider package won’t be able to help you. provider is based on types, and without the type, it doesn’t know what you want.”
    要記得這件事。
  15. 有時候不需要取得 model 中的資料來更動 UI,但仍然要存取它來做一些事(removeall(),清空購物車),就可以使用 Provider.of() 。

今天只初探了一點點點的 Networking,明天將透過官方 Cookbook 中的實例學習 Networking & http。

Leave a Comment

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