Làm việc với JSON và xây dựng Model class trong Flutter

MayFest2025

Chào mừng đến với bài học về JSON trong Flutter! Hôm nay, chúng ta sẽ khám phá cách Flutter/Dart làm việc với định dạng dữ liệu phổ biến này, cách tạo model class, viết hàm fromJson, toJson, và thực hành hiển thị dữ liệu JSON lên màn hình.

Mục tiêu hôm nay

Tìm hiểu JSON là gì
Cách Flutter/Dart xử lý dữ liệu JSON
Tạo một model class để ánh xạ dữ liệu
Viết fromJson và toJson
Thực hành: hiển thị dữ liệu từ JSON ra màn hình

JSON là gì?

JSON (JavaScript Object Notation) đã trở thành một chuẩn mực không thể thiếu trong việc trao đổi dữ liệu giữa ứng dụng client (như ứng dụng Flutter của bạn) và server. Nhờ tính đơn giản, dễ đọc và khả năng biểu diễn cấu trúc dữ liệu phức tạp, JSON được ưa chuộng rộng rãi, đặc biệt khi làm việc với các API.

Ví dụ:

{
  "id": 1,
  "name": "Flutter",
  "age": 22
}

Tạo model class từ JSON

Để quản lý dữ liệu JSON một cách có cấu trúc và an toàn, việc tạo một model class là vô cùng quan trọng. Model class định nghĩa các thuộc tính (fields) tương ứng với các trường trong JSON.

Ví dụ về model class User:

class User {
  final int id;
  final String name;
  final int age;

  User({required this.id, required this.name, required this.age});

  // Hàm chuyển từ JSON thành object Dart
  factory User.fromJson(Map<String, dynamic> json) {
    return User(
      id: json['id'],
      name: json['name'],
      age: json['age'],
    );
  }

  // Hàm chuyển object Dart thành JSON
  Map<String, dynamic> toJson() {
    return {
      'id': id,
      'name': name,
      'age': age,
    };
  }
}

Hàm fromJson là một factory constructor. Factory constructor cho phép bạn trả về một instance đã tồn tại hoặc một instance mới của class. Trong trường hợp này, nó chịu trách nhiệm tạo một đối tượng User từ dữ liệu JSON.
Hàm toJson giúp bạn chuyển đổi ngược lại, từ một đối tượng User thành một Map<String, dynamic> có thể dễ dàng chuyển đổi thành chuỗi JSON để gửi đi.

Thực hành: Parse JSON trong Flutter

Giả sử chúng ta có một chuỗi JSON:

String jsonString = '{"id": 1, "name": "Flutter", "age": 22}';

Bây giờ, chúng ta sẽ sử dụng model ở trên để parse nó và hiển thị thông tin:

import 'dart:convert';

void main() {
  String jsonString = '{"id": 1, "name": "Flutter", "age": 22}';

  Map<String, dynamic> userMap = jsonDecode(jsonString);

  User user = User.fromJson(userMap);

  print('ID: ${user.id}');
  print('Tên: ${user.name}');
  print('Tuổi: ${user.age}');
}

Kết quả in ra sẽ là:

ID: 1
Tên: Flutter
Tuổi: 22

Ghi nhớ:

JSON thường là dữ liệu dạng Map<String, dynamic> trong Dart
Model class giúp quản lý dữ liệu rõ ràng và an toàn
Hàm fromJson() là bắt buộc nếu ta muốn parse dữ liệu
Hàm toJson() hữu ích khi gửi dữ liệu lên server

Kết luận

Chúng ta đã cùng nhau khám phá những khái niệm cơ bản và quan trọng nhất để làm việc với dữ liệu JSON trong Flutter. Từ việc hiểu JSON là gì, cách Dart xử lý nó, xây dựng model class, đến việc thực hành parse và hiển thị dữ liệu.

Ngày mai, có thể mình sẽ thử dùng API thật để fetch dữ liệu JSON và hiển thị lên giao diện. Hẹn gặp lại mọi người ở bài viết tiếp theo nhé!

Android Flutter iOS