yii.
← Writing
Flutter 技術 · · 5 min read

“freezed” makes model class strong and easily

這篇寫於 2022 年。工具和 API 變化很快，部分步驟可能已經不適用。

省時又提升效率

freezed 用於進行 Model 類的擴充與強化，是一個聰明的程式碼產生器，讓開發者不用再煩惱每個Model所需的基本函式與功能，因為完成這些重複的內容可能需要上百行程式碼、很多時間與耐心，而現在可以更專注於資料的定義與邏輯。

實現#

  • 產生 toString()，包含所有屬性的資訊
  • 產生 hashCode getter
  • 產生 == operator function，進行物件比對(替代equatable套件)
  • 產生 copyWith()，複製物件內容

特點#

  • 可支援 Union class，適合多狀態的定義，非常適用於狀態管理，例如：Bloc、Riverpod
  • 使用 map()、when() 等函式針對不同狀態進行處理，避免 if、switch 判斷的疏漏

安裝#

  • json_serializable 為 Dart 提供一些處理JSON的函式
  • json_annotation 支援 json_serializable 使用的標記語法
  • freezed_annotation 支援 freezed 使用的標記語法
  • build_runner 透過指令自動產生 Dart 檔案

freezed | Dart PackageWelcome to Freezed, yet another code generator for data-classes/unions/pattern-matching/cloning. Dart is awesome, but…pub.dev

json_serializable | Dart PackageProvides Dart Build System builders for handling JSON. The builders generate code when they find members annotated with…pub.dev

建立 Model#

  • 工廠建構函式，提供Model所需要的參數、資料(不需要自行撰寫屬性，等待自動產生)
  • fromJson() 工廠建構函式，負責Json字串解析(fromJson函式會自動產生)

補充：如果有遺漏的部分或拼寫錯誤，build_runner 將在執行時產生一些錯誤

產生程式碼#

  • 在 terminal 裡輸入指令，產生缺少的程式碼
flutter pub run build_runner build --delete-conflicting-outputs

補充：每次更新完Model後都需要透過指令重新產生對應的檔案

搭配 freezed_annotation#

  • 提供許多標記方式，可以自定義 Model 內容

針對 Class#

  • @freezed → 不可變的類別，所以屬性預設都不可更新
  • @Freezed(makeCollectionsUnmodifiable: false) → 雖然屬性不能更新，但可以讓 Lists、Maps、Sets 集合可變
  • @unfreezed → 可變的類別，屬性可以重新賦值與更新，因為可變所以不支援 == 和 hashCode 的產生和實作，也不能為 const class

針對建構函式#

  • @Assert() → 指定參數的檢查條件
  • @deprecated → 即將棄用的Class

針對建構參數、屬性#

  • required → 不可為空值的參數需要
  • @JsonKey() → 對應指定的 json_key
  • @Default() → 預設值，如果有給就不需要 required
  • @JsonValue() → 給Enum使用，對應指定的 json_key
  • @deprecated → 即將棄用的屬性

針對 Union class constructor#

  • 可以使用 @Implements()、@With()，實作介面

Model 自定義屬性和函式#

  • 需要定義一個空的內部建構函式

在 Widget 上使用 Union Class#

VSCode Freezed(Extension)#

Freezed 套件，可以透過指令快速新增一個 freezed model 檔案，不需要再寫重複的程式碼。

1. 選擇 Generate a new Freezed class
1. 選擇 Generate a new Freezed class
2. 輸入 Class name
2. 輸入 Class name
3. 是否要添加JSON操作
3. 是否要添加JSON操作
4. 產生出需要的Class檔案
4. 產生出需要的Class檔案

範例#

GitHub - chyiiiiiiiiiiii/freezed_example: “freezed” can make you create strong models fastly and…“freezed” can make you create strong models fastly and improve efficiency. - GitHub - chyiiiiiiiiiiii/freezed_example…github.com

參考#

其他文章#

關於我#

贊助#

謝謝你！這是一個很長的文章而且你花費時間看完，真的非常感謝。

還有一件事， 如果覺得文章不錯可以贊助我，讓我有更多的動力和熱情分享 學習筆記和生活！請我喝一杯咖啡吧～

https://www.buymeacoffee.com/yiichenhi

最後#

希望有幫助到你/妳，歡迎追蹤我，方便瀏覽最新的文章，也請別忘記給我拍手哦 (最多可以達到50次)！

本文原刊登於 Medium。