Flutter Freezed 示例:在 Flutter App 中學習 Freezed 的速成班
介紹
您愿意構建一個演示應用程序并學習在您的 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 教程的第一步是設置項目并安裝依賴項。
依賴項:
撲:
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 人才!
想開發(fā)一款高性價比的 Flutter 應用?堅持這個問題:你在哪里可以找到熟練的開發(fā)人員?立即聯(lián)系 Bacancy 并從我們這里聘請 flutter 應用程序開發(fā)人員!
使用 freezeed 創(chuàng)建模型類
首先,您需要創(chuàng)建一個帶有@freezed() 注釋的類。
使用 Mixins 定義類
下一步是用 mixins 定義一個類。
創(chuàng)建構造函數(shù)
現(xiàn)在我們添加一個工廠方法作為構造函數(shù),其中包含所有參數(shù)/屬性的列表。在這里,我們在來自'freezed_annotation'的工廠方法中定義了 @Default 。 @Default 注解用于為非必需屬性設置默認值。
導入“包: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是什么。
考慮這個片段。
導入“包: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í)行以下命令。
您現(xiàn)在將在項目資源管理器中看到新文件。
您可以在 .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,但我們也無法按預期直接分配屬性。
報錯提示isActive有getter,但是沒有創(chuàng)建setter,所以不能賦值。
分配新值的正確方法如下。
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,我們將看到以下輸出。
Github 存儲庫:Flutter 凍結示例
下面是使用凍結包生成代碼的源碼:flutter-freezed-example。查看代碼,克隆存儲庫并使用代碼。
在我們最新的博客中,我們嘗試涵蓋使用 BLoC 模式進行狀態(tài)管理的Flutter BLoC 教程。
結論
目前為止就這樣了。我希望 flutter freezed 示例有助于開始使用 freezed 包。我們學習了如何在凍結包的幫助下創(chuàng)建數(shù)據(jù)模型。請隨時給我們回信并分享您的反饋。對于像您這樣的 Flutter 愛好者,我們有一個Flutter 教程頁面,您可以在其中了解有關 Flutter 基本和高級概念的更多信息。
(言鼎科技)