Fluent high efficiency JSON to model

Time:2021-7-27

background


In the development process, the server usually returns data in JSON format. For web developers (JavaScript and typescript), we can directly get JSON data for our logic.

JSON itself originates from JavaScript, and JavaScript parsing and processing JSON has natural advantages

But likeJava、DartIn such strongly typed languages, we need to convert JSON data to model objects for use.

  • In general, we will use some third-party libraries to dynamically convert the model, but there is no one like Java in fluentGSON/JacksonThis kind of JSON serialization library.
  • Because runtime reflection is disabled in fluent. The official explanation is that runtime reflection interferes with dart’s performanceTree Shaking, useTree ShakingCan be inReleaseVersion removes unused code, which can significantly optimize the size of the application.
  • Because reflection is applied to dart’s reflection function by default, it is impossible to dynamically convert to model.

Several schemes of serialization


There are two serialization schemes officially recommended by fluent:https://flutterchina.club/json/

  1. Small projects are manually serialized. This scheme is relatively simple and is more suitable for simple JSON conversion of small projects. However, the project is huge or multiple people cooperate, which is prone to errors and difficult to maintain.

    Fluent has a built-in dart: convert library
    Manually serialize JSON using dart: Convert
  2. Using code generation in large and medium-sized projects requires the following three dependency packages to generate models through automatic code generation. This scheme is easy to maintain. Since the serialized data code no longer needs to be written or maintained manually, you can minimize the abnormal risk of serialized JSON data at run time;

Conversion process


  1. Add dependencies in pubspec.yaml
json_annotation: ^3.1.0
json_serializable: ^3.5.0
build_runner: ^1.0.0

Fluent high efficiency JSON to model

Execute pub get in Android stuido

  1. New model class (mode / Demo)_ model.dart)
class DemoModel{
    
}
  1. Convert the JSON data requested by the back-end to a model on the web page:

    https://czero1995.github.io/json-to-model/: website transformation supports the transformation of infinite nested complex objects

    Fluent high efficiency JSON to model

  • For example, copy the following JSON data to the web page (left):
{
  "code": 0,
  "data": {
    "avatar": "xxx.png",
    "id": 7,
    "float":0.1,
    "is_deleted": false,
    "nickname": "nickName",
    "openId": null,
    "phone": "13641418383",
    "store_ids": [1,2],
    "updated": "2020-11-05 11:53:10",
    "more":[{"a":1,"b":"b","c":{"c1":0.2,"c2":2}}]
  }
}
  • Then convert to model data (right)
import 'package:json_annotation/json_annotation.dart';
part 'demo_model_data.g.dart'; 
@JsonSerializable(explicitToJson: true)
class DemoModelModel {
    DemoModelData data;
    DemoModelModel({
      this.data,
      this.code,
      this.message
    });
    factory DemoModelModel.fromJson(Map<String, dynamic> json) => _$DemoModelModelFromJson(json);
    Map<String, dynamic> toJson() => _$DemoModelModelToJson(this);
}

@JsonSerializable(explicitToJson: true)
class DemoModelData {
    String avatar;
    int id;
    double float;
    bool is_deleted;
    String nickname;
    var openId;
    String phone;
    List<int> store_ids; 
    String updated;
    List<MoreData> more; 
    DemoModelData({
        this.avatar, 
        this.id, 
        this.float, 
        this.is_deleted, 
        this.nickname, 
        this.openId, 
        this.phone, 
        this.store_ids, 
        this.updated, 
        this.more, 
    });
  factory DemoModelData.fromJson(Map<String, dynamic> json) => _$DemoModelDataFromJson(json);
  Map<String, dynamic> toJson() => _$DemoModelDataToJson(this);
}

@JsonSerializable(explicitToJson: true) 
class MoreData{ 
    int a;
    String b;
    CData c;
    MoreData({
        this.a, 
        this.b, 
        this.c, 
    });
    factory MoreData.fromJson(Map<String, dynamic> json) => _$MoreDataFromJson(json);
    Map<String, dynamic> toJson() => _$MoreDataToJson(this);
}

@JsonSerializable(explicitToJson: true) 
class CData{ 
    double c1;
    int c2;
    CData({
        this.c1, 
        this.c2, 
    });
    factory CData.fromJson(Map<String, dynamic> json) => _$CDataFromJson(json);
    Map<String, dynamic> toJson() => _$CDataToJson(this);
}

Then copy the converted data and overwrite it in the demo_ On the model.dart file

  1. Execute build_ runner

Execute the command under the project terminal:

flutter pub run build_runner build

When execution is complete, ademo_model.g.dartfile

The whole execution process is as follows