Tìm nạp và phân tích cú pháp dữ liệu JSON trong Flutter

Tiếp theo phần hướng dẫn xây dựng ứng dụng Flutter thì Team Việt Dev sẽ trình bày tìm nạp và phân tích cú pháp dữ liệu JSON trong Flutter.

Flutter là một SDK mã nguồn mở do Google phát triển, được sử dụng để tạo ra các ứng dụng dành cho thiết bị di động trên nền tảng iOS và Android. Flutter giúp bạn dễ dàng xây dựng các ứng dụng với giao diện thiết kế đẹp mang phong cách Material Design.

Trong ví dụ này hãy cùng thực hiện tìm nạp và phân tích cú pháp dữ liệu JSON (Fetching & Parsing JSON with Flutter) chứa danh sách 5000 đối tượng ảnh từ API REST của JSONPlaceholder bằng phương thức http.get trong Flutter.

Bước 1: Trước tiên cần phải thêm gói http vào dự án và thực hiện yêu cầu mạng.

Future<http.Response> fetchPhotos(http.Client client) async {
    return client.get('https://jsonplaceholder.typicode.com/photos');
}

Bước 2: Phân tích cú pháp và chuyển đổi JSON trong Flutter. Đầu tiên bạn sẽ tạo lớp Photo chứa dữ liệu về ảnh.

class Photo {

  final int id;
  final String title;
  final String thumbnailUrl;

  Photo({this.id, this.title, this.thumbnailUrl});

  factory Photo.fromJson(Map<String, dynamic> json) {
    return Photo(
      id: json['id'] as int,
      title: json['title'] as String,
      thumbnailUrl: json['thumbnailUrl'] as String,
    );
  }

}

Tìm nạp và phân tích cú pháp dữ liệu JSON thành danh sách ảnh.

Future<List<Photo>> fetchPhotos(http.Client client) async {
   final response = await client.get('https://jsonplaceholder.typicode.com/photos');
   return compute(parsePhotos, response.body);
}

Bạn cần thay thế nội dung của tập tin lib/main.dart thay thế hoàn toàn bằng đoạn mã sau đây:

import 'dart:async';
import 'dart:convert';

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

Future<List<Photo>> fetchPhotos(http.Client client) async {
  final response = await client.get('https://jsonplaceholder.typicode.com/photos');
  return compute(parsePhotos, response.body);
}

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

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

class Photo {
  
  final int albumId;
  final int id;
  final String title;
  final String url;
  final String thumbnailUrl;

  Photo({this.albumId, this.id, this.title, this.url, this.thumbnailUrl});

  factory Photo.fromJson(Map<String, dynamic> json) {
    return Photo(
      albumId: json['albumId'] as int,
      id: json['id'] as int,
      title: json['title'] as String,
      url: json['url'] as String,
      thumbnailUrl: json['thumbnailUrl'] as String,
    );
  }
}

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final appTitle = 'Fetching & Parsing JSON with Flutter';

    return MaterialApp(
      title: appTitle,
      home: MyHomePage(title: appTitle),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final String title;

  MyHomePage({Key key, this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: FutureBuilder<List<Photo>>(
        future: fetchPhotos(http.Client()),
        builder: (context, snapshot) {
          if (snapshot.hasError) print(snapshot.error);

          return snapshot.hasData
              ? PhotosList(photos: snapshot.data)
              : Center(child: CircularProgressIndicator());
        },
      ),
    );
  }
}

class PhotosList extends StatelessWidget {
  final List<Photo> photos;

  PhotosList({Key key, this.photos}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
      ),
      itemCount: photos.length,
      itemBuilder: (context, index) {
        return Image.network(photos[index].thumbnailUrl);
      },
    );
  }
}

Bước 3: Hãy bắt đầu khởi chạy ứng dụng bằng cách nhấp vào mũi tên màu xanh lá cây trong IDE. Bạn sẽ thấy đầu ra Android hoặc iOS tùy thuộc vào thiết bị của bạn.

Lời kết: Trong thời gian tới Team Việt Dev sẽ tiếp tục chia sẻ thêm nhiều bài viết về xây dựng ứng dụng di động trên Android và iOS bằng Flutter miễn phí đến bạn đọc, các bạn nhớ theo dõi kênh để có được những chia sẻ mới nhất.

(Tác giả: Team Việt Dev)