How to download and parse json data in flutter

In this new flutter tutorial, you will learn how to download data in flutter, how to use the future builder flutter functionality to download the data asynchronously, how to parse the json data in a dart structure by decoding it using the compute flutter functionality to perform the operation on an external thread. In this simple flutter example you will learn the basic of the http flutter library and of json parsing operation by doing it in the background. You will see ho to parse json list, json string and more complex object.

Let's start the flutter project

Open Android Studio and start a new Flutter Application Project.

Add now the http library by open the pubspec.yaml file and add the http library dependency. Press now on the Get Package button to download the http library.

dependencies:
  flutter:
 sdk: flutter
  cupertino_icons: ^0.1.2
  http: ^0.12.0+2

Future Builder in Flutter: let's do asynchronous operation in dart

The future builder flutter functionality allows you to perform an async task. The future builder will notify as soon as the data is ready, or if an error while performing the async task happened. Here of the structure of the future builder looks like:

FutureBuilder<DataType>(
future: fetchFunction(),
builder: (context, snapshot) {}
)

The fetchFunction is the async function called by the future builder. The snapshot variable contains the data as soon as is ready and the error if happened.

The fetchFunction in this example will perform the http data request. Then, as soon the data has been received with the 200 http status code, the json parsing operation will be performed on an external thread using the compute functionality.

Future<DataType> fetchFunction() async {  
 final response = await http.get(url);

 if (response.statusCode == 200) {
return compute(parseFunction, response.body);
 } else {
throw Exception('Failed to load');
 }
}

JSON parsing in flutter: let's decode the data in a dart object structure

To perform the json parsing operation we will use the fromJson utility.

DataType parseFunction(String data) {
  final parsed = DataType.fromJson(json.decode(data));
  return parsed;
}

We have then to define our structure and the type of the data. Here is the json data example used: json data example. We have different cases to handle, a string, an integer, an array of strings, an array of objects and a simple object.

Let's define our data structure. In particular we have to define the variable names and types that will be filled by the json structure, and how the parsing operation will be performed. Let's start by the string. We define the string variable, and the fromJson function

class JsonDemoData {
  final String string;

  JsonDemoData({this.string});

  factory JsonDemoData.fromJson(Map<String, dynamic> json) {
 return JsonDemoData(
  string: json['string'],
 );
  }
}

Let's define now the list of strings.

class JsonDemoData {
  final List<String> array;

  JsonDemoData({this.array});

  factory JsonDemoData.fromJson(Map<String, dynamic> json) {
 return JsonDemoData(
array: new List<String>.from(json['array'])
 );
  }
}

Define now the array of objects definition and the single object.

class JsonDemoData {
final List<SingleObjectStruct> arrayofobjects;

  JsonDemoData({this.arrayofobjects});

  factory JsonDemoData.fromJson(Map<String, dynamic> json) {
 return JsonDemoData(
 arrayofobjects: (json['arrayofobjects'] as List)
.map((i) => SingleObjectStruct.fromJson(i))
.toList()
 );
  }
}


class SingleObjectStruct {
  final String key;

  SingleObjectStruct({this.key});

  factory SingleObjectStruct.fromJson(Map<String, dynamic> json) {
 return SingleObjectStruct(key: json['key']);
  }
}

Here you can download the project example:

Download