Flutter Freezed 示例:在 Flutter App 中學習 Freezed 的速成班

yanding 2023-06-07 758

介紹

您愿意構建一個演示應用程序并學習在您的 Flutter 應用程序中使用 freezed 嗎?那么這里有一個顫動凍結的例子給你!在今天的教程中,我們將了解凍結包及其實現(xiàn)方法。

什么是冷凍?

freezed 包是一個健壯且可擴展的數(shù)據(jù)類和聯(lián)合類代碼生成器。此外,它還允許對 JSON 數(shù)據(jù)進行序列化和反序列化。

Rémi Rousselet 創(chuàng)建了 Freezed 作為不可變類的代碼生成器,您可能還記得他的包:provider、riverpod 和 hooks。

Flutter 凍結示例:項目設置

我們需要在 pubspec.yaml 中添加一些依賴項才能正常工作。因此,我們的 flutter freezed 教程的第一步是設置項目并安裝依賴項。

Flutter Freezed 示例:在 Flutter App 中學習 Freezed 的速成班
依賴項:
撲:
  SDK: 顫動
凍結注釋:^2.0.3
json_annotation:^4.0.6dev_dependencies:
顫動測試:
  SDK: 顫動
凍結:^2.0.3+1
build_runner:^2.1.11
json_serializable: ^6.3.1

以下是這些依賴項的作用的概要:

  • freezed_annotation:凍結代碼生成器的注釋。

  • freezed:具有簡單 API 的代碼生成器,可以處理復雜的用例。

  • build_runner:它生成模型文件并監(jiān)視任何更改,并相應地重建模型。

  • json_serializable:注解 Dart 類自動生成與 JSON 相互轉換的代碼。JsonSerializable 注釋將為一個類生成代碼到/從 JSON。

  • json_annotation: Json_serializable 使用注解來定義它的操作。

運行以下命令來安裝依賴項。

Flutter Freezed 示例:在 Flutter App 中學習 Freezed 的速成班
顫振酒吧得到

Flutter Freezed 示例:在 Flutter App 中學習 Freezed 的速成班

我們比較凍結和未凍結的模型類。沒有凍結的模型類生成意味著“樣板”代碼在具有很多功能的復雜應用程序中沒有用處。沒有凍結的模型類生成有很多代碼,而且這種方法無法擴展。使用這個包,我們可以消除很多樣板代碼。

利用世界級的 Flutter 人才!
想開發(fā)一款高性價比的 Flutter 應用?堅持這個問題:你在哪里可以找到熟練的開發(fā)人員?立即聯(lián)系 Bacancy 并從我們這里聘請 flutter 應用程序開發(fā)人員!

使用 freezeed 創(chuàng)建模型類

首先,您需要創(chuàng)建一個帶有@freezed() 注釋的類。

Flutter Freezed 示例:在 Flutter App 中學習 Freezed 的速成班
導入“包:freezed_annotation/freezed_annotation.dart”;@凍結類用戶模型{}

使用 Mixins 定義類

下一步是用 mixins 定義一個類。

Flutter Freezed 示例:在 Flutter App 中學習 Freezed 的速成班
導入“包:freezed_annotation/freezed_annotation.dart”;@凍結使用 _$UserModel{} 類 UserModel

創(chuàng)建構造函數(shù)

現(xiàn)在我們添加一個工廠方法作為構造函數(shù),其中包含所有參數(shù)/屬性的列表。在這里,我們在來自'freezed_annotation'的工廠方法中定義了 @Default 。 @Default 注解用于為非必需屬性設置默認值。

Flutter Freezed 示例:在 Flutter App 中學習 Freezed 的速成班
導入“包:freezed_annotation/freezed_annotation.dart”;@凍結類 UserModel 與 _$UserModel {
常量工廠用戶模型({
  必需的字符串名字,
  必需的字符串姓氏,
  必填字符串 emailId,
  @Default(false) bool isActive,
}) = _UserModel;

我們現(xiàn)在已經創(chuàng)建了我們的構造函數(shù)。接下來,我們要實現(xiàn)fromJson/toJson。freezed包中并沒有生成fromJson和toJson,但是它知道json_serializable是什么。

考慮這個片段。

Flutter Freezed 示例:在 Flutter App 中學習 Freezed 的速成班
導入“包:freezed_annotation/freezed_annotation.dart”;“user_model.freezed.dart”部分;“user_model.g.dart”部分;@凍結類 UserModel 與 _$UserModel {
常量工廠用戶模型({
  必需的字符串名字,
  必需的字符串姓氏,
  必填字符串 emailId,
  @Default(false) bool isActive,
}) = _UserModel;
工廠 UserModel.fromJson(Mapjson) => _$UserModelFromJson(json);}

在這里,我們完成了一個帶有凍結代碼生成的UserModel類。

使用凍結生成代碼

上面的代碼片段顯示了兩行使用 part 并包含 freezed 的代碼,這些代碼讓 freezed 包在我們運行 build_runner 時知道何時為我們生成代碼。

現(xiàn)在我們真的接近尾聲了。如果我們遺漏了某些內容或添加了拼寫錯誤,我們的代碼生成器將生成一些錯誤。

下一步是在終端內導航到我們項目所在的文件夾并執(zhí)行以下命令。

Flutter Freezed 示例:在 Flutter App 中學習 Freezed 的速成班
flutter pub 運行 build_runner build --delete-conflicting-outputs

您現(xiàn)在將在項目資源管理器中看到新文件。

Flutter Freezed 示例:在 Flutter App 中學習 Freezed 的速成班

您可以在 .freezed.dart 文件中找到代碼。代碼生成器已將以下內容添加到每個模型類:

工廠方法中所有存儲參數(shù)/屬性的列表已確定

  • toString() 方法

  • == 運算符

  • hashCode getter 變量

  • copyWith() 方法

  • toJson() 方法

您已成功創(chuàng)建的數(shù)據(jù)類!

使用“copyWith”方法

該方法返回具有新屬性的更新實例。

當狀態(tài)管理解決方案中的值發(fā)生變化時,狀態(tài)就會更新。狀態(tài)管理解決方案在其值更改時更新狀態(tài)。這時 copyWith 就派上用場了。

為了演示,假設我們在我們的狀態(tài)下創(chuàng)建了 UserModel 對象。
如果我們想更新我們的狀態(tài),原始 UserModel 對象的值將被用來創(chuàng)建一個新的 UserModel 對象。

您會注意到我們默認獲得不變性。盡管為我們生成了 copyWith,但我們也無法按預期直接分配屬性。

Flutter Freezed 示例:在 Flutter App 中學習 Freezed 的速成班

報錯提示isActive有getter,但是沒有創(chuàng)建setter,所以不能賦值。

分配新值的正確方法如下。

Flutter Freezed 示例:在 Flutter App 中學習 Freezed 的速成班
void _updateActiveUser(int index) {
userModel[index] = userModel[index].copyWith(
    isActive: !userModel[index].isActive);
設置狀態(tài)((){});}// ...孩子:專欄(
孩子們: [
  ListView.builder(
      收縮包裹:真,
      itemCount: userModel.length,
      itemBuilder: (BuildContext 上下文, int 索引) {
        返回容器(
          保證金:EdgeInsets.only(上:20,左:20,右:20),
          裝飾:BoxDecoration(
            顏色:Colors.grey.shade200,
            borderRadius: BorderRadius.all(Radius.circular(10)),
          ),
          填充:EdgeInsets.all(10),
          孩子:ListTile(
            title: Text(userModel[index].firstName + " " + userModel[index].lastName),
            副標題:文本(用戶模型[索引].emailId),
            尾隨:Transform.scale(
                規(guī)模:1,
                孩子:開關(
                  onChanged: (val) {
                    _updateActiveUser(索引);
                  },
                  值:userModel[索引].isActive,
                  activeColor: Colors.blue,
                  activeTrackColor: Colors.grey.shade700,
                  inactiveThumbColor: Colors.white12,
                  inactiveTrackColor: Colors.grey.shade700,
                )),
          ),
        );
      }),
],)

對于點擊列表視圖下的開關的用戶,我們實現(xiàn)了如下。我們會將 isActive 用戶的值更新為 true 或 false。讓我們創(chuàng)建一個函數(shù),將其附加到開關的 onChange 屬性,并只傳入該項目的當前索引。

單擊任何 ListTile,我們將看到以下輸出。

Flutter Freezed 示例:在 Flutter App 中學習 Freezed 的速成班

Github 存儲庫:Flutter 凍結示例

下面是使用凍結包生成代碼的源碼:flutter-freezed-example。查看代碼,克隆存儲庫并使用代碼。

在我們最新的博客中,我們嘗試涵蓋使用 BLoC 模式進行狀態(tài)管理的Flutter BLoC 教程。

結論

目前為止就這樣了。我希望 flutter freezed 示例有助于開始使用 freezed 包。我們學習了如何在凍結包的幫助下創(chuàng)建數(shù)據(jù)模型。請隨時給我們回信并分享您的反饋。對于像您這樣的 Flutter 愛好者,我們有一個Flutter 教程頁面,您可以在其中了解有關 Flutter 基本和高級概念的更多信息。

言鼎科技

The End