Flutter JSON 解析懒人攻略

1. pubspec.yaml 添加依赖

dependencies:
  json_annotation: ^2.0.0

dev_dependencies:
  build_runner: ^1.0.0
  json_serializable: ^2.0.0

2. 添加引用

import 'package:json_annotation/json_annotation.dart';
part 'your_model_file_name.g.dart';

3. [可选] 使用 Code Snippets

VSCode 下建立 flutter.code-snipptes

添加以下代码段

"Json Model": {
    "scope": "dart",
	"prefix": "fJsonModel",
	"body": [
		"@JsonSerializable()",
		"class ${1:type} {",
		"${1:type} ();",
		"factory ${1:type} .fromJson(Map<String, dynamic> json) => _$${1:type} FromJson(json);",
		"Map<String, dynamic> toJson() => _$${1:type} ToJson(this);",
		"}"
	],
	"description": "Json Model"
},

4. (通过Code Snippets) 建立以下模型

@JsonSerializable() // 关键要素 1
class MyUserModel { // 关键要素 2
  int user_id;  // 要解析的字段，和 server 字段同名同类型
  String user_name;
  String user_avatar;

  MyUserModel({this.user_id, this.user_name, this.user_avatar});

//反序列化 关键要素 3
  factory MyUserModel.fromJson(Map<String, dynamic> json) => _$MyUserModelFromJson(json); 

//序列化 关键要素 4
  Map<String, dynamic> toJson() => _$MyUserModelToJson(this);
}

5. 服务端和本地字段不同名的处理

比如服务端叫 user_id，本地想叫 userId.

Code Snippets:

"Json key": {
	"scope": "dart",
	"prefix": "fJsonKey",
	"body": [
		"@JsonKey(name: '${1:serverKey}')",
		"final ${2:type} ${3:localKey};"
	],
	"description": "Json key"
}

@JsonKey(name: 'user_id') // 服务端
final int userId; // 本地

6. 有些字段不想被解析

@JsonKey(ignore: true)
final int myVar;

7. 开启脚本转换刚才的源代码

打开终端，cd 到工程根目录

输入以下命令：

1. 一次性转换

flutter pub run build_runner build --delete-conflicting-outputs

2. 循环监控转换

flutter pub run build_runner watch --delete-conflicting-outputs

注意：循环监控可能造成模拟器 hot reload 失效，建议建模完毕后关闭。

--delete-conflicting-outputs的意义是，如果你不小心手动改动了.g.dart 文件，不加这句会造成 conflict，转换失败。加了这句会把手改代码覆盖掉。

执行完之后，会自动出现 YourModel.g.dart 类，里面就是完整的 json 解析模板代码。这个类不要修改，它是由脚本自动生成。

8. 调用

JSON → Model

Map userMap = jsonDecode(jsonString);
var user = User.fromJson(userMap);

Model → JSON

String json = jsonEncode(user);