[Day27]Flutter Netflix UI 使用json_serializable转换Model

大家好，今天要来做Model的转换，使用到json_serializable、build_runner

这是前面定义的User，包含name跟assetName，想为它添加Json序列化的方法可以自己定义，但自己定义有时候项目多了，就有些繁琐，今天要来用json_serializable帮助我们做这个步骤

//位於user.dart中
class User {
  User(this.name, this.assetName);

  String name;
  String assetName;
}

在pubspec.yaml下新增 json_serializable: ^3.5.0，然後pub get

dependencies:
  json_serializable: ^3.5.0

user.dart

import json_annotation.dart进user.dart
在class上方加入@JsonSerializable()
新增part 'user.g.dart';在上方，这时这行会是红色的，是因为我们还没有user.g.dart这个档案

import 'package:json_annotation/json_annotation.dart';

part 'user.g.dart';

@JsonSerializable()
class User {
  User(this.name, this.assetName);

  String name;
  String assetName;
}

生成user.g.dart

接着我们再到pubspec.yaml，新增build_runner:在dev_dependencies下，然後pub get

dev_dependencies:
  flutter_test:
    sdk: flutter
  build_runner:

接着在Terminal中输入，执行後会开始自动帮助建档案

flutter packages pub run build_runner build

完成时就会发现原本资料夹里面多了一个user.g.dart，这边它根据原本的class去自动做出两个方法
UserFromJson与UserToJson

// GENERATED CODE - DO NOT MODIFY BY HAND

part of 'user.dart';

// **************************************************************************
// JsonSerializableGenerator
// **************************************************************************

User _$UserFromJson(Map<String, dynamic> json) {
  return User(
    json['name'] as String,
    json['assets_name'] as String,
  );
}

Map<String, dynamic> _$UserToJson(User instance) => <String, dynamic>{
      'name': instance.name,
      'assets_name': instance.assetName,
    };

我们在原本的user.dart中加入这两行，就可以使用User.fromJson以及toJson()

  factory User.fromJson(Map<String, dynamic> json) => _$UserFromJson(json);

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

名称不一样的时候

假如传进来的key是assets_name与程序里面变数名称是assetsName,也有操作可以转换，加上@JsonKey(name: 'assets_name')，再重新生成一次就可以

class User {
  User(this.name, this.assetName);

  String name;
  @JsonKey(name: 'assets_name')
  String assetName;

  factory User.fromJson(Map<String, dynamic> json) => _$UserFromJson(json);

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

测试

假设一个json资料

 String jsonUserData =
      "{\"users\":[{\"name\":\"p1\",\"assets_name\":\"assets\/icons\/icon_user.jpg\"},{\"name\":\"p1\",\"assets_name\":\"assets\/icons\/icon_user.jpg\"},{\"name\":\"p1\",\"assets_name\":\"assets\/icons\/icon_user.jpg\"},{\"name\":\"p1\",\"assets_name\":\"assets\/icons\/icon_user.jpg\"},{\"name\":\"p1\",\"assets_name\":\"assets\/icons\/icon_user.jpg\"}]}";

使用json.decode()可以把json字串转回Map<String,dynamic>
data['users']如上定义是一个List，使用User.fromJson(element)将每一个element资料解析成User

List<User> _users =[];
 Map data = json.decode(jsonUserData);
    (data['users'] as List).forEach((element转成User) {
      _users.add(User.fromJson(element));
    });

flutter_gen/pubspec.yaml Not Found问题

flutter_gen/pubspec.yaml Not Found问题
今天使用的时候发生这个问题，主要原因是前面做国际化的时候使用过自动生成code，l10n.yaml，这两个好像有点冲突

flutter:
  generate: true

所以根据其中一则回覆，我们到
flutter_neflix_cover/.dart_tool/flutter_gen/
新建一个pubspec.yaml，内容如下，就可以暂时解决这个问题

name: test
description: A new Flutter application.
version: 1.0.0

dependencies:

dev_dependencies:

资料来源
flutter 教学 教程基础篇 (27) 自动产生 JSON Serialize，Auto JSON serialize