flutter - How to Speed Up Compute for Parsing Json Function

Question

I have a function in bloc that needs to retrieve data from API then parse and load them into the widget.

For Data Retrieval from API, it's so fast. However, I see a bottleneck when parsing the json, as seen as below code :

      response = await dio.get("/article/get-random?category=1&lang=${translations.currentLanguage}");
      var data = response.data['data'];
      print(data);
      articleList.clear();
      if (response.statusCode == 200) {

        //data length is 5
        for (int i = 0; i < data.length; i++) {

          //Start of The Bottleneck is here...

          model = await compute(articleFromJson, json.encode(data[i]));
          articleList.add(model);

          //End of The Bottleneck
        }

        print ("above code take around 5 seconds");

        // sink to the stream
        _articlesController.sink.add(articleList);
        _loadingArticleController.sink.add(false);
        await Storage.storeArticles(data);
      }

This Code : model = await compute(articleFromJson, json.encode(data[i])); take around 3-5 seconds to complete, sometime longer.

and here're the class where function code of articleFromJson reside :

import 'dart:convert';

Article articleFromJson(String str) {
    final jsonData = json.decode(str);
    return Article.fromJson(jsonData);
}

String articleToJson(Article data) {
    final dyn = data.toJson();
    return json.encode(dyn);
}

class Article {

    int id;
    int category;
    String name;
    String baseUrl;
    String url;
    String imageUrl;
    dynamic data;
    int status;
    int order;
    DateTime createdAt;
    DateTime updatedAt;
    String categoryLabel;

    Article({
        this.id,
        this.category,
        this.name,
        this.baseUrl,
        this.url,
        this.imageUrl,
        this.data,
        this.status,
        this.order,
        this.createdAt,
        this.updatedAt,
        this.categoryLabel,
    });

    factory Article.fromJson(Map<String, dynamic> json) => new Article(
        id: json["id"],
        category: json["category"],
        name: json["name"],
        baseUrl: json["base_url"],
        url: json["url"],
        imageUrl: json["image_url"],
        data: json["data"],
        status: json["status"],
        order: json["order"],
        createdAt: DateTime.parse(json["created_at"]),
        updatedAt: DateTime.parse(json["updated_at"]),
        categoryLabel: json["category_label"],
    );

    Map<String, dynamic> toJson() => {
        "id": id,
        "category": category,
        "name": name,
        "base_url": baseUrl,
        "url": url,
        "image_url": imageUrl,
        "data": data,
        "status": status,
        "order": order,
        "created_at": createdAt.toIso8601String(),
        "updated_at": updatedAt.toIso8601String(),
        "category_label": categoryLabel,
    };
}

The Json Data itself so simple like below (only 5 rows) :

{
    "status": 200,
    "message": "Success",
    "data": [
        {
            "id": 990121,
            "category": 1,
            "name": "Article 1 Title",
            "base_url": "base_url",
            "url": "https://article_1",
            "image_url": "https://ik.imagekit.io/xxx1",
            "data": null,
            "status": 1,
            "order": 4,
            "created_at": "2019-05-01 13:58:37",
            "updated_at": "2019-07-24 15:25:23",
            "category_label": "Article"
        },
        {
            "id": 990122,
            "category": 2,
            "name": "Article 2 Title",
            "base_url": "base_url",
            "url": "https://article_2",
            "image_url": "https://ik.imagekit.io/xxx2",
            "data": null,
            "status": 1,
            "order": 4,
            "created_at": "2019-05-01 13:58:37",
            "updated_at": "2019-07-24 15:25:23",
            "category_label": "Article"
        },
        {
            "id": 990123,
            "category": 1,
            "name": "Article 3 Title",
            "base_url": "base_url",
            "url": "https://article_3",
            "image_url": "https://ik.imagekit.io/xxx3",
            "data": null,
            "status": 1,
            "order": 4,
            "created_at": "2019-05-01 13:58:37",
            "updated_at": "2019-07-24 15:25:23",
            "category_label": "Article"
        },
        {
            "id": 990124,
            "category": 1,
            "name": "Article 4 Title",
            "base_url": "base_url",
            "url": "https://article_4",
            "image_url": "https://ik.imagekit.io/xxx4",
            "data": null,
            "status": 1,
            "order": 4,
            "created_at": "2019-05-01 13:58:37",
            "updated_at": "2019-07-24 15:25:23",
            "category_label": "Article"
        },
        {
            "id": 990125,
            "category": 1,
            "name": "Article 5 Title",
            "base_url": "base_url",
            "url": "https://article_5",
            "image_url": "https://ik.imagekit.io/xxx5",
            "data": null,
            "status": 1,
            "order": 4,
            "created_at": "2019-05-01 13:58:37",
            "updated_at": "2019-07-24 15:25:23",
            "category_label": "Article"
        },        
    ]
}

My Client need to improve this loading/decode speed, Any Idea ?

Answer 1

You did not use the compute() function where you should be please refer to Parse JSON in the background for the correct way of parsing JSON in a compute() isolate function