如何创建 json_serializable相关联的Flutte

前言

在开发过程中，我们会从服务器请求数据，然后解析服务器返回的json。在Android开发中，我们会使用GsonFormat用来生成json对应的model，那么在Flutter中该如何生成对应的model呢?

使用

一、 添加依赖

在pubspec.yaml中添加json_annotation、build_runner、json_serializable相关插件依赖，如下：

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
  dio: ^2.1.0-stable-version
  json_annotation: ^1.2.0 #json_serializable助手

dev_dependencies:
  flutter_test:
    sdk: flutter
  build_runner: ^1.0.0  #创建.g.dart
  json_serializable: ^1.5.1  #序列化json

然后点击右上角的packages get

二、 创建model

创建model有两种方式：

1. 网页工具生成 https://caijinglong.github.io/json2dart/index_ch.html
2. 插件生成 https://github.com/liujingtech/IntelliJ-Json2json_serializable

注意：
一般生成的json不会有什么问题，但是如果json中的key为数字情况则需要手动修改。
json如下：

{
  "keys": {
    "1": "A",
    "2": "B"
  }
}

直接生成的model文件：

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

@JsonSerializable()
  class Entity extends Object {

  @JsonKey(name: 'keys')
  Keys keys;

  Entity(this.keys,);

  factory Entity.fromJson(Map<String, dynamic> srcJson) => _$EntityFromJson(srcJson);

  Map<String, dynamic> toJson() => _$EntityToJson(this);
}

@JsonSerializable()
  class Keys extends Object {

  @JsonKey(name: '1')
  String 1;

  @JsonKey(name: '2')
  String 2;

  Keys(this.1,this.2,);

  factory Keys.fromJson(Map<String, dynamic> srcJson) => _$KeysFromJson(srcJson);

  Map<String, dynamic> toJson() => _$KeysToJson(this);
}

由于dart中变量名不能为数字，所有类Keys中的两个变量都是非法的，所以我们需要手动修改为如下：

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

@JsonSerializable()
  class Entity extends Object {

  @JsonKey(name: 'keys')
  Keys keys;

  Entity(this.keys,);

  factory Entity.fromJson(Map<String, dynamic> srcJson) => _$EntityFromJson(srcJson);

  Map<String, dynamic> toJson() => _$EntityToJson(this);
}

@JsonSerializable()
  class Keys extends Object {

  @JsonKey(name: '1')
  String $1;

  @JsonKey(name: '2')
  String $2;

  Keys(this.$1,this.$2,);

  factory Keys.fromJson(Map<String, dynamic> srcJson) => _$KeysFromJson(srcJson);

  Map<String, dynamic> toJson() => _$KeysToJson(this);
}

把变量String 1和String 2改为String $1和String $2，构造函数Keys(this.1,this.2,);改为Keys(this.$1,this.$2,);，具体叫取什么名字只要符合dart的命名规范即可。同时别忘了修改构造函数。

三、创建.g.dart

在项目根目录下执行命令flutter packages pub run build_runner build，执行完毕后会在model的同级目录下创建<model name>.g.dart的文件。

四、使用model