Flutter HTTP Client example with ListView – Fetch data and parse JSON in background
flutter
16
json
15
listview
6
Male avatar

loveprogramming viết ngày 06/05/2021

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 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.

flutter-http-example-listview-fetch-data-json-background

HTTP Fetch Data in background and Display in ListView

Add http package

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

dependencies:
  http: 

Create DataModel class


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 json) {
    return Post(
      userId: json['userId'] as int,
      id: json['id'] as int,
      title: json['title'] as String,
      body: json['body'] as String,
    );
  }
}

Parse JSON into a List of Objects

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

List<Post> parsePosts(String responseBody) {
  final parsed = json.decode(responseBody).cast<Map<String, dynamic>>();

  return parsed.map<Post>((json) => Post.fromJson(json)).toList();
}

Fetch Data in a separate isolate

This is how we fetch data using the get method:

Future<List<Post>> 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);
}

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.

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

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

Male avatar

loveprogramming

545 bài viết.
97 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
Male avatar
1 0
Tutorial Link: (Link) (Ảnh) Django is a Pythonbased free and opensource web framework that follows the modeltemplateview architectural pattern. A...
loveprogramming viết 11 tháng trước
1 0
Male avatar
1 0
https://loizenai.com/angular11nodejspostgresqlcrudexample/ Angular 11 Node.js PostgreSQL Crud Example (Ảnh) Tutorial: “Angular 11 Node.js Postg...
loveprogramming viết 9 tháng trước
1 0
Male avatar
1 0
Angular Spring Boot jwt Authentication Example Github https://loizenai.com/angularspringbootjwt/ (Ảnh) Tutorial: ” Angular Spring Boot jwt Authe...
loveprogramming viết 9 tháng trước
1 0
Bài viết liên quan
White
2 0
Control flow statements Anh em có thể tham khảo tại (Link). Vì phần này khá cơ bản và giống Java, không có gì đặc biệt nên mình sẽ bỏ qua. Throw...
ngohado viết hơn 3 năm trước
2 0
Male avatar
0 0
https://grokonez.com/flutter/flutterlistviewexamplelistviewbuilder Flutter ListView example with ListView.builder In this tutorial, we're gonna b...
loveprogramming viết 5 tháng trước
0 0
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


Male avatar
{{userFollowed ? 'Following' : 'Follow'}}
545 bài viết.
97 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!