title: flutter - How to Speed Up Compute for Parsing Json Function
body: <p>I have a function in <code>bloc</code> that needs to retrieve data from API then parse and load them into the widget.</p>
  
  <p>For Data Retrieval from API, it's so fast. However, I see a <strong>bottleneck</strong> when parsing the json, as seen as below code :</p>
  
  <pre><code>      response = await dio.get("/article/get-random?category=1&amp;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 &lt; 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);
        }
  </code></pre>
  
  <p>This Code : <code>model = await compute(articleFromJson, json.encode(data[i]));</code> <strong>take around 3-5 seconds to complete</strong>, sometime longer. </p>
  
  <p>and here're the class where function code of <code>articleFromJson</code> reside :</p>
  
  <pre><code>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&lt;String, dynamic&gt; json) =&gt; 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&lt;String, dynamic&gt; toJson() =&gt; {
          "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,
      };
  }
  </code></pre>
  
  <p>The Json Data itself so simple like below (only 5 rows) :</p>
  
  <pre><code>{
      "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"
          },        
      ]
  }
  </code></pre>
  
  <p>My Client need to improve this loading/decode speed, Any Idea ?</p>