, October 26, 2021

0 kết quả được tìm thấy

Làm việc với JSON & Serialization trong Flutter

  • Đăng bởi  Kieu Hoa
  •  Jul 20, 2021

  •   4 min reads
Làm việc với JSON & Serialization trong Flutter

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à fromJsontoJson, về mặt này, sẽ parse json thành class Event và ngược lại. fromJson nhận vào Map<String, dynamicvà 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, 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 jsonDecodefromJson:

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

Bài viết liên quan

[FREE EBOOK] TIPS & TRICKS GIÚP X3 TỐC ĐỘ CODE FLUTTER CỦA BẠN

Cuốn ebook "TIPS & TRICKS GIÚP X3 TỐC ĐỘ CODE FLUTTER CỦA BẠN" chỉ ra 32 trường hợp giúp bạn code nhanh hơn so với việc code thông thường...

[FREE EBOOK] TIPS & TRICKS GIÚP X3 TỐC ĐỘ CODE FLUTTER CỦA BẠN
Flutter 2.5 có gì mới?

Bản phát hành Flutter 2.5 lần này có rất nhiều bản cập nhật mới thú vị. Cùng bắt đầu tìm hiểu trong bài viết này nhé!...

Flutter 2.5 có gì mới?
Tìm hiểu Flutter Opacity Widget qua ví dụ cơ bản

Bài viết sau sẽ giới thiệu một cách tổng quan về Opacity widget và cung cấp đoạn code để bạn có thể tự thực hành thông qua những ví dụ cơ bản....

Tìm hiểu Flutter Opacity Widget qua ví dụ cơ bản
Flutter Tutorial 2021 #34 - Hướng dẫn tạo hiệu ứng "fancy" khi chuyển màn hình

Thêm một hiệu ứng mới nữa mà các bạn sẽ được giới thiệu tới! Đó chính là hiệu ứng "fancy" khi chuyển màn hình. Hiệu ứng này sẽ giúp tăng trải nghiệm và gây ấn tượng cực mạnh với người dùng....

Flutter Tutorial 2021 #34 - Hướng dẫn tạo hiệu ứng "fancy" khi chuyển màn hình
Flutter Tutorial 2021 #33 - "Giao tiếp" giữa 2 màn hình bất kỳ trong Flutter

Làm sao để giao tiếp 2 hoặc 3, 4 màn hình trong app với nhau? Chúng ta cùng xem video bên dưới để hiểu được cách truyền dữ liệu từ màn hình A sang màn hình B và ngược lại nhé!...

Flutter Tutorial 2021 #33 - "Giao tiếp" giữa 2 màn hình bất kỳ trong Flutter
You've successfully subscribed to 200Lab Blog
Great! Next, complete checkout for full access to 200Lab Blog
Xin chào mừng bạn đã quay trở lại
OK! Tài khoản của bạn đã kích hoạt thành công.
Success! Your billing info is updated.
Billing info update failed.
Your link has expired.