---
title: "Làm việc với JSON & Serialization trong Flutter"
description: "JSON là một định dạng để chuyển dữ liệu qua web và hơn nữa. Mọi lập trình viên sẽ gặp vấn đề: làm cách nào để parse JSON thành một object? "
canonical: "https://200lab.io/blog/lam-viec-voi-json-serialization-trong-flutter"
published: "2021-07-20T15:03:00Z"
updated: "2026-08-21T07:17:58Z"
authors: ["Kieu Hoa"]
tags: ["Flutter", "Dart"]
reading_minutes: 5
access: "public"
---

JSON là một định dạng tuyệt vời để chuyển dữ liệu qua web và hơn thế nữa. Mọi nhà phát triển sẽ phải đối mặt với vấn đề: làm cách nào để parse JSON thành một object? Bây giờ chúng ta sẽ kiểm tra những gì Flutter cung cấp để serialize các object JSON. Vì lợi ích của bài viết này, chúng ta sẽ xem xét việc tạo một object “Event” được như sau:

```
class Event {
  final String title;
  final String date;
  final String imageUrl;
  Event(this.title, this.date, this.imageUrl);
}
```

## 1. Manual serialization (Parse Json bằng tay)

Manual serialization được hỗ trợ bởi Dart với thư viện `dart:convert`. Trên class dữ liệu của chúng ta, chúng ta sẽ cần tạo 2 hàm được gọi là `fromJson` và `toJson`, về mặt này, sẽ parse json thành class Event và ngược lại. `fromJson` nhận vào `Map<String, dynamic`và sẽ cung cấp cho bạn một instance của class dữ liệu, `toJson` là một hàm class cung cấp cho một Map bắt đầu từ các tham số dữ liệu.

```
class Event {
  final String title;
  final String date;
  final String imageUrl;

  Event (this.title, this.date, this.imageUrl);

  Event.fromJson(Map<String, dynamic> json):
        title= json['title'],
        date = json['date'],
        imageUrl= json['imageUrl'];

  Map<String, dynamic> toJson() =>
    {
      'title': title,
      'date': date,
      'imageUrl': imageUrl
    };
}
```

Sau đó, serialize và deserialize bằng một dòng code đơn giản:

```
//JSON String to a map
Map eventMap = jsonDecode(jsonString);
//Serialize to object
var event = Event.fromJson(eventMap);
//Encode to JSON String
String json = jsonEncode(event);
```

Điều này rất dễ dàng nhưng hãy lưu ý rằng bạn có thể phải đối mặt với các object phức tạp hơn (như JSON lồng nhau) hoặc bạn có thể mong muốn có một cách “tự động” hơn để thực hiện thao tác này.

## 2. Code generation libraries (Parse Json bằng tool)

Chúng ta sẽ thấy một package hữu ích có tên là [json\_serializable](<https://pub.dev/packages/json_serializable>), do Google xuất bản, package này tự động tạo code để serialize và giải mã hóa(deserialize) class dữ liệu của chúng ta.

Trước tiên, chúng ta cần thêm các phụ thuộc của mình, chúng ta cũng cần thêm dev\_dependencies vì sẽ có quá trình tạo code từ `json_serializable` mà chúng ta  muốn:

```
dependencies:
  json_annotation: <latest_version>
dev_dependencies:
  build_runner: <latest_version>
  json_serializable: <latest_version>
```

Sau đó, trên class Event, chúng ta cần nói rằng đó là class json\_serializable sử dụng chú thích và cho phép class truy cập vào các thuộc tính private trong các trường cần tạo:

```
import 'package:json_annotation/json_annotation.dart';
/// This allows the class to access private members in
/// the generated file called *.g.dart, where the star denotes the source file name.
part 'event.g.dart';
/// An annotation for the code generator to know that this class needs
/// JSON serialization.
@JsonSerializable()
class Event{
  Event(this.title, this.date, this.imageUrl);
  String title;
  String date;
  String imageUrl;
  /// A necessary factory constructor for creating a new Event instance
  /// from a map. Pass the map to the generated `_$EventFromJson()` constructor.
  /// The constructor is named after the source class Event.
  factory Event.fromJson(Map<String, dynamic> json) => _$EventFromJson(json);
  /// `toJson` is the convention for a class to declare support for serialization
  /// to JSON. The implementation simply calls the private, generated
  /// helper method `_$EventToJson`.
  Map<String, dynamic> toJson() => _$EventToJson(this);
}
```

Thao tác này sẽ tạo code để mã hóa và giải mã tất cả các tham số trong class này. Bạn có thể thay đổi tên mà bộ giải mã tìm thấy bằng cách thêm chú thích vào tham số theo cách này:

```
//On the json it's 'event_image_url'
@JsonKey(name: 'event_image_url')
String imageUrl;
```

Bạn cũng có thể đặt một số giá trị mặc định, phần tử bắt buộc hoặc bỏ qua một số trường:

```
@JsonKey(defaultValue: 'NoTitle')
String title;
@JsonKey(required: true)
String date;
@JsonKey(ignore: true)
String imageUrl;
```

Đoạn cuối là chạy một lệnh để tạo serialization code JSON với một trình theo dõi, một số class dữ liệu có thay đổi hay không, serialization code cũng sẽ được tạo lại:

```
//Run on project root
flutter pub run build_runner watch
```

Cuối cùng, chúng ta sẽ chỉ phải gọi `jsonDecode` và `fromJson`:

```
Map eventMap = jsonDecode(jsonString);
var event = Event.fromJson(eventMap);
String json = jsonEncode(event);
```

Nếu class của bạn có class lồng nhau, bạn sẽ cần JsonSerialize cũng là class lồng nhau và trên  “father class”, bạn sẽ cần thay đổi chú thích này:

```
@JsonSerializable(explicitToJson: true)
class Event{
  String title;
  //Our class (already json_serialized)
  Address address;
}
```

Nó có vẻ không phải là điều dễ dàng nhất nhưng tốt hơn là làm điều đó theo cách thủ công, ngoài ra nếu bạn thay đổi thứ gì đó trên object của mình, bạn không cần phải thay đổi cách serialization hoạt động, bạn chỉ cần thực hiện lại lệnh hoặc để người quan sát làm điều đó. Khá tiện dụng!

Bài viết này được dịch từ: [Starting with Flutter: JSON & Serialization](<https://medium.com/theotherdev-s/starting-with-flutter-json-serialization-bb72c582676e>)

## Đọc thêm

- [Tự học Dart: Các Dart Operators (toán tử) bạn cần biết](https://200lab.io/blog/tu-hoc-ngon-ngu-dart-toan-tu-operator.md): Cập nhật nhanh các toán tử - operator quan trọng trong Dart để có thể sử dụng ngôn ngữ này một cách hiệu quả nhất nhé.
- [Flutter cơ bản: Điều cần biết khi lập trình ứng dụng đầu tiên](https://200lab.io/blog/flutter-co-ban-xay-dung-ung-dung-dau-tien.md): Flutter là framework hữu ích khi phát triển ứng dụng đa nền tảng. Hãy bỏ túi các kiến thức Flutter cơ bản để bắt đầu hành trình học hỏi của bạn.
- [Dart là gì? Giới thiệu cơ bản về ngôn ngữ lập trình Dart](https://200lab.io/blog/tu-hoc-ngon-dart-nhung-dieu-can-biet-truoc-khi-bat-dau.md): Dart là gì? Vì sao bạn cần học ngôn ngữ lập trình Dart để phát triển ứng dụng đa nền tảng? Cùng tìm hiểu những kiến thức cơ bản về Dart trong bài viết này nhé!
- [Flutter là gì? Vì sao nên học công cụ lập trình Flutter?](https://200lab.io/blog/flutter-la-gi.md): Flutter là gì? Vì sao bạn cần học lập trình Flutter để phát triển ứng dụng đa nền tảng? Cùng tìm câu trả lời qua bài viết này nhé!
- [Flutter cơ bản: Widget Tree, Element Tree & Render Tree](https://200lab.io/blog/flutter-co-ban-widget-tree-element-tree-render-tree.md): Flutter cơ bản đến nâng cao không khó. Để 200Lab Blog cập nhật cho bạn những thông tin mới nhất về Widget Tree, Element Tree và Render Tree nhé.
- [Mọi bài viết chủ đề Flutter](https://200lab.io/blog/tags/flutter.md)

Toàn bộ nội dung: https://200lab.io/llms.txt