老铁记得 转发 ，猫哥会出现更多 Flutter 好文~~~~
微信群 ducafecat
b 站 https://space.bilibili.com/40...
原文
https://medium.com/flutterdev...
代码
参考
- https://pub.dev/packages/json...
- https://pub.dev/packages/json...
注释
Flutter 是一个可移植的 UI 工具包。换句话说，它是一个全面的应用软件开发工具包(SDK) ，包含小部件和工具。Flutter 是一个收费的开源工具，用于开发挪动、桌面和 web 应用程序。Flutter 是一种跨平台的开发工具。这意味着用同样的代码，咱们能够同时创立 ios 和 android 应用程序。这是在整个过程中节省时间和资源的最佳形式。
在本文中，咱们将摸索应用 json_serializable 包和 json_annotation，并理解如何应用它将咱们的模型解析到 JSON 并通过序列化生成咱们本人的代码。咱们开始吧。
JSON Serializable
JSON (JSON)是一种数据格式，它将对象编码成字符串。这种数据能够很容易地在服务器和浏览器之间转换，也能够在服务器和服务器之间转换。序列化是将对象转换为雷同字符串的过程。为此，咱们应用 json 序列化包，然而它能够依据 json 正文库提供的正文为您生成一个模型类。
Implementation
每当咱们须要建设模型和工厂的时候。因为模型不会总是扭转，所以你不须要总是扭转模型。因而，为了应用 JSON，咱们必须增加上面解释的一些包。
- 这是提供给 Dart 构建零碎的。当它在用 json_annotation 定义的类中找到带正文的成员时，就会生成代码
- 它定义了 JSON_serializable 用于创立 JSON 序列化、反序列化类型的代码的正文
- 咱们应用 build_runner 包来生成应用 dart 代码的文件
当初让咱们看看如何将所有这些包增加到 pubspec 中。
- 第一步: 增加依赖项
将依赖项增加到 pubspec ー yaml 文件。
---dependencies: flutter: sdk: flutter # The following adds the Cupertino Icons font to your application. # Use with the CupertinoIcons class for iOS style icons. cupertino_icons: ^0.1.2 json_annotation: ^4.0.1dev_dependencies: flutter_test: sdk: flutter build_runner: ^2.0.5 json_serializable: ^4.1.3- 第二步: Importing
import 'package:json_annotation/json_annotation.dart';import 'package:build_runner/build_runner.dart';import 'package:json_serializable/json_serializable.dart';- 第三步: 启用 AndriodX
org.gradle.jvmargs=-Xmx1536Mandroid.enableR8=trueandroid.useAndroidX=trueandroid.enableJetifier=true如何实现 dart 文件中的代码
你须要别离在你的代码中实现它
首先，咱们将创立一个咱们命名为 user.dart 的模型类。
当初咱们将看到 Dart 如何应用 Dart: convert 库本机反对手动序列化。用户 dart 文件筹备好了，咱们将有一个数据 JSON 对象的列表，其中每个对象将有一个用户名，姓氏，和它的地址，咱们曾经在字符串类型的变量中定义了，你将看到在数据类中咱们有两个咱们须要创立函数，别离称为 fromJson 和 toJson，它们将 JSON 转换为咱们的用户类。
import 'package:json_annotation/json_annotation.dart';part 'user.g.dart';@JsonSerializable()class User { String name, lastName, add; bool subscription; User({this.name,this.lastName,this.add,this.subscription,}); factory User.fromJson(Map<String,dynamic> data) => _$UserFromJson(data); Map<String,dynamic> toJson() => _$UserToJson(this);}当初，当咱们运行 build_runner 命令时，json*serializer 将生成这个 *$UserFromJson(json)。咱们将从中取得 user.g.dart 文件。
要运行 build_runner 命令，咱们将在 Android Studio 中关上一个终端，并输出以下行。
flutter pub run build_runner build当咱们在构建运行程序中运行这个命令时，会呈现一些行，过一段时间后它就胜利生成了。
INFO] Generating build script...[INFO] Generating build script completed, took 301ms[INFO] Initializing inputs[INFO] Reading cached asset graph...[INFO] Reading cached asset graph completed, took 305ms[INFO] Checking for updates since last build...[INFO] Checking for updates since last build completed, took 1.5s[INFO] Running build...[INFO] Running build completed, took 4.7s[INFO] Caching finalizeddependency graph...[INFO] Caching finalized dependency graph completed, took 44ms[INFO] Succeeded after 4.8s with 0 outputs (1 actions)在 build_runner 过程实现之后，咱们在一个蕴含序列化代码的用户文件上面增加一个名为 user.g.dart 的新文件。当咱们制作一个新的模型，而后咱们流过这个过程。
// GENERATED CODE - DO NOT MODIFY BY HANDpart of 'user.dart';// **************************************************************************// JsonSerializableGenerator// **************************************************************************User _$UserFromJson(Map<String, dynamic> json) { return User( name: json['name'] as String, lastName: json['lastName'] as String, add: json['add'] as String, subscription: json['subscription'] as bool, );}Map<String, dynamic> _$UserToJson(User instance) => <String, dynamic>{ 'name': instance.name, 'lastName': instance.lastName, 'add': instance.add, 'subscription': instance.subscription, };在此之后，咱们创立了一个类，其中显示了一个列表项，咱们曾经为该列表项定义了一个将来的生成器列表视图生成器，其中咱们曾经在文本小部件中定义了用户列表的项。
FutureBuilder<List<User>>( future: getData(), builder: (context, data) { if (data.connectionState != ConnectionState.waiting && data.hasData) { var userList = data.data; return ListView.builder( itemCount: userList.length, itemBuilder: (context, index) { var userData = userList[index]; return Container( height: 100, margin: EdgeInsets.only(top: 30, left: 20, right: 20), decoration: BoxDecoration( color: Colors.grey.shade200, borderRadius: BorderRadius.all(Radius.circular(10)), ), padding: EdgeInsets.all(15), child: Column( crossAxisAlignment: CrossAxisAlignment.start, mainAxisAlignment: MainAxisAlignment.spaceAround, children: [ Text( 'First Name: ' + userData.name, style: TextStyle( fontWeight: FontWeight.w600,), ), ], ), ); }); } else { return Center( child: CircularProgressIndicator(), ); } })当咱们运行应用程序时，咱们应该失去屏幕的输入，就像上面的屏幕截图一样。
Code File
import 'dart:convert';import 'package:flutter/material.dart';import 'package:flutter_json_serilization_exm/main.dart';import 'package:flutter_json_serilization_exm/model/user.dart';class JsonSerilization extends StatefulWidget { @override _JsonSerilizationState createState() => _JsonSerilizationState();}class _JsonSerilizationState extends State<JsonSerilization> { Future<List<User>> getData() async { return await Future.delayed(Duration(seconds: 2), () { List<dynamic> data = jsonDecode(JSON); List<User> users = data.map((data) => User.fromJson(data)).toList(); return users; }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Json Serialization Demo"), ), body: Container( child: FutureBuilder<List<User>>( future: getData(), builder: (context, data) { if (data.connectionState != ConnectionState.waiting && data.hasData) { var userList = data.data; return ListView.builder( itemCount: userList.length, itemBuilder: (context, index) { var userData = userList[index]; return Container( height: 100, margin: EdgeInsets.only(top: 30, left: 20, right: 20), decoration: BoxDecoration( color: Colors.grey.shade200, borderRadius: BorderRadius.all(Radius.circular(10)), ), padding: EdgeInsets.all(15), child: Column( crossAxisAlignment: CrossAxisAlignment.start, mainAxisAlignment: MainAxisAlignment.spaceAround, children: [ Text( 'First Name: ' + userData.name, style: TextStyle( fontWeight: FontWeight.w600, fontSize: 15), ), Text( 'Last Name: ' + userData.lastName, style: TextStyle( fontWeight: FontWeight.w600, fontSize: 15), ), Text( 'Add: ' + userData.add, style: TextStyle( fontWeight: FontWeight.w600, fontSize: 15), ), ], ), ); }); } else { return Center( child: CircularProgressIndicator(), ); } }), ), ); }}Conclusion
在这篇文章中，我解释了主动生成 JSON 系列化 Flutter，你能够依据本人的批改和试验，这个小介绍是从主动生成 JSON 系列化 Flutter 演示从咱们这边。
© 猫哥
https://ducafecat.tech/
https://github.com/ducafecat
往期
开源
GetX Quick Start
https://github.com/ducafecat/...
新闻客户端
https://github.com/ducafecat/...
strapi 手册译文
https://getstrapi.cn
微信探讨群 ducafecat
系列汇合
译文
https://ducafecat.tech/catego...
开源我的项目
https://ducafecat.tech/catego...
Dart 编程语言根底
https://space.bilibili.com/40...
Flutter 零根底入门
https://space.bilibili.com/40...
Flutter 实战从零开始 新闻客户端
https://space.bilibili.com/40...
Flutter 组件开发
https://space.bilibili.com/40...
Flutter Bloc
https://space.bilibili.com/40...
Flutter Getx4
https://space.bilibili.com/40...
Docker Yapi
https://space.bilibili.com/40...