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 http package to fetch data from the internet, then parse JSON to a Dart List of Objects and display that List in ListView widget.

Related Post: Flutter ListView example with ListView.builder

Flutter App Overview

We will build a Flutter App that can display a List of Post objects gotten from JSONPlaceholder REST API. We are parsing JSON document that performs an expensive computation in the background.


HTTP Fetch Data in background and Display in ListView

Add http package

Add this package to the dependencies section of our pubspec.yaml:

Create DataModel class

Parse JSON into a List of Objects

We will convert our HTTP Response into a list of Dart objects.

Fetch Data in a separate isolate

This is how we fetch data using the get method:

If we run the fetchPosts() 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 compute() function. This function runs parsePosts() in a background isolate and return the result.

Display the data

In order to display fetched data on screen, we can use the FutureBuilder widget with two parameters:
– The Future to work with. In our case, the return of fetchPosts() function.
– A builder function that tells Flutter what to render, depending on the state of the Future: loading, success, or error.

ListView widget uses ListView.builder:


Add http package

Add this package to the dependencies section of our pubspec.yaml:

Create DataModel Class


Create Main App Widget


Create Widget for fetching and parsing data


Create ListView Widget


Source Code


By grokonez | July 8, 2018.

Related Posts

Got Something To Say:

Your email address will not be published. Required fields are marked *