Flutter HTTP Client example with ListView – Fetch data and parse JSON in background
Tags: flutter, json, listview
Published: 2021-05-06 12:59:30

https://grokonez.com/flutter/flutter-http-client-example-listview-fetch-data-parse-json-background

Flutter HTTP Client example with ListView – Fetch data and parse JSON in background

In this tutorial, we're gonna build a Flutter App that use <code><a href="https://pub.dartlang.org/packages/http" target="_blank" rel="nofollow">http</a></code> package to fetch data from the internet, then parse JSON to a Dart List of Objects and display that List in <code>ListView</code> widget.

Related Post: <a href="https://grokonez.com/android/flutter-listview-example-listview-builder">Flutter ListView example with ListView.builder</a>

<!--more-->
<h2>Flutter App Overview</h2>
We will build a Flutter App that can display a List of Post objects gotten from <a href="https://jsonplaceholder.typicode.com/posts" target="_blank" rel="nofollow">JSONPlaceholder REST API</a>. We are parsing JSON document that performs an expensive computation in the background.

<img src="https://grokonez.com/wp-content/uploads/2018/07/flutter-http-example-listview-fetch-data-json-background.png" alt="flutter-http-example-listview-fetch-data-json-background" width="245" height="427" class="alignnone size-full wp-image-13554" />
<h2>HTTP Fetch Data in background and Display in ListView</h2>
<h3>Add http package</h3>
Add <a href="https://pub.dartlang.org/packages/http#-installing-tab-" target="_blank" rel="nofollow">this package</a> to the dependencies section of our <em><strong>pubspec.yaml</strong></em>:
<pre class="lang:java">
dependencies:
  http: <latest_version>
</pre>
<h3>Create DataModel class</h3>
<pre><code class="language-java">
class Post {
  final int userId;
  final int id;
  final String title;
  final String body;

  Post({this.userId, this.id, this.title, this.body});

  factory Post.fromJson(Map<String, dynamic> json) {
    return Post(
      userId: json['userId'] as int,
      id: json['id'] as int,
      title: json['title'] as String,
      body: json['body'] as String,
    );
  }
}
</code></pre>
<h3>Parse JSON into a List of Objects</h3>
We will convert our HTTP Response into a list of Dart objects. 
<pre><code class="language-java">List&lt;Post&gt; parsePosts(String responseBody) {
  final parsed = json.decode(responseBody).cast&lt;Map&lt;String, dynamic&gt;&gt;();

  return parsed.map&lt;Post&gt;((json) =&gt; Post.fromJson(json)).toList();
}</code></pre>
<h3>Fetch Data in a separate isolate</h3>
This is how we fetch data using the <code>get</code> method:
<pre><code class="language-java">Future&lt;List&lt;Post&gt;&gt; fetchPosts(http.Client client) async {
  final response = await client.get('https://jsonplaceholder.typicode.com/posts');

  // compute function to run parsePosts in a separate isolate
  return parsePosts(response.body);
}</code></pre>
If we run the <code>fetchPosts()</code> function on a slower phone, the App may freeze for a moment when it parses and converts the JSON.

>> So we are moving the parsing and conversion to a background isolate using Flutter <code><a href="https://docs.flutter.io/flutter/foundation/compute.html" target="_blank" rel="nofollow">compute()</a></code> function. This function runs <code>parsePosts()</code> in a background isolate and return the result.


More at:

https://grokonez.com/flutter/flutter-http-client-example-listview-fetch-data-parse-json-background

Flutter HTTP Client example with ListView – Fetch data and parse JSON in background