Panduan Lengkap Menggunakan json_serializable dan json_annotation untuk Model yang Rapi di Flutter

Dalam pengembangan aplikasi Flutter, sering kali kita perlu mengonversi data dari JSON ke objek Dart atau sebaliknya. Ini terutama umum dalam aplikasi yang mengambil data dari API atau menyimpan data secara lokal dalam format JSON. Untuk mempermudah proses ini, paket json_serializable dan json_annotation dapat membantu membuat model data yang rapi dan terstruktur.

Apa Itu json_serializable dan json_annotation?

• json_serializable adalah paket yang memungkinkan kita membuat kode Dart untuk mengonversi JSON ke objek Dart secara otomatis.

• json_annotation adalah paket pendamping yang menyediakan anotasi yang digunakan json_serializable untuk mendefinisikan proses serialisasi (konversi objek ke JSON) dan deserialisasi (konversi JSON ke objek).

Dengan menggunakan kedua paket ini, kita dapat membuat model yang bersih, mudah dikelola, dan lebih aman, tanpa harus menulis sendiri kode boilerplate untuk proses serialisasi dan deserialisasi.

Langkah-Langkah Menggunakan json_serializable dan json_annotation

Berikut langkah-langkah untuk mengimplementasikan json_serializable dan json_annotation dalam proyek Flutter.

1. Tambahkan json_serializable dan json_annotation ke pubspec.yaml

Langkah pertama adalah menambahkan dependensi json_serializable, json_annotation, dan build_runner di proyek Flutter kamu. build_runner diperlukan untuk menjalankan perintah build yang menghasilkan kode.

dependencies:
  json_annotation: ^latest_version

dev_dependencies:
  json_serializable: ^latest_version
  build_runner: ^latest_version

Catatan: Ganti ^latest_version dengan versi terbaru dari paket yang bisa kamu temukan di json_serializable dan json_annotation.

Setelah mengedit file pubspec.yaml, jalankan perintah berikut di terminal untuk mengunduh dependensi:

flutter pub get

2. Buat Model Data

Langkah selanjutnya adalah membuat model data yang akan kamu gunakan dalam proyek. Sebagai contoh, mari kita buat model User dengan atribut id, name, dan email.

import 'package:json_annotation/json_annotation.dart';

part 'user.g.dart';

@JsonSerializable()
class User {
  final int id;
  final String name;
  final String email;

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

  // Mengonversi JSON ke objek User
  factory User.fromJson(Map<String, dynamic> json) => _$UserFromJson(json);

  // Mengonversi objek User ke JSON
  Map<String, dynamic> toJson() => _$UserToJson(this);
}

Penjelasan:

• @JsonSerializable(): Anotasi ini menandai bahwa kelas ini akan di-generate untuk fungsi fromJson dan toJson.

• part 'user.g.dart';: Bagian ini adalah deklarasi untuk file yang akan dihasilkan secara otomatis oleh json_serializable.

• _$UserFromJson(json) dan _$UserToJson(this): Ini adalah fungsi yang akan di-generate secara otomatis oleh json_serializable.

3. Menjalankan Build Runner

Setelah membuat model, jalankan perintah berikut untuk mengenerate file user.g.dart yang berisi kode serialisasi dan deserialisasi.

dart run build_runner build

Perintah ini akan menghasilkan file user.g.dart dengan kode serialisasi dan deserialisasi otomatis, sehingga kamu tidak perlu menulis fungsi fromJson dan toJson secara manual.

Jika file user.g.dart berhasil dibuat, file tersebut akan berisi kode serupa berikut:

// GENERATED CODE - DO NOT MODIFY BY HAND

part of 'user.dart';

User _$UserFromJson(Map<String, dynamic> json) {
  return User(
    id: json['id'] as int,
    name: json['name'] as String,
    email: json['email'] as String,
  );
}

Map<String, dynamic> _$UserToJson(User instance) => <String, dynamic>{
      'id': instance.id,
      'name': instance.name,
      'email': instance.email,
    };

4. Menggunakan Model dalam Proyek

Sekarang model User kamu sudah siap digunakan dalam proyek Flutter. Berikut adalah contoh penggunaan model tersebut.

Contoh Penggunaan dalam Pengambilan Data dari API

Misalkan kamu mengambil data pengguna dari API yang mengembalikan JSON. Berikut adalah contoh cara mendeserialisasi JSON menjadi objek User.

import 'dart:convert';
import 'package:http/http.dart' as http;

Future<User> fetchUser(int userId) async {
  final response = await http.get(Uri.parse('https://api.example.com/users/$userId'));

  if (response.statusCode == 200) {
    // Mengubah JSON menjadi objek User
    return User.fromJson(jsonDecode(response.body));
  } else {
    throw Exception('Gagal mengambil data pengguna');
  }
}

Contoh Penggunaan dalam Mengonversi Objek ke JSON

Jika kamu ingin mengirim data pengguna ke server, kamu dapat mengonversi objek User ke JSON.

Future<void> createUser(User user) async {
  final response = await http.post(
    Uri.parse('https://api.example.com/users'),
    headers: {'Content-Type': 'application/json'},
    body: jsonEncode(user.toJson()),
  );

  if (response.statusCode != 201) {
    throw Exception('Gagal membuat pengguna');
  }
}

Dengan json_serializable, kamu hanya perlu memanggil User.fromJson(json) untuk deserialisasi dan user.toJson() untuk serialisasi.

Keuntungan Menggunakan json_serializable dan json_annotation

1. Kode Lebih Bersih: Tidak perlu menulis fungsi fromJson dan toJson secara manual, yang membuat kode lebih bersih dan terstruktur.

2. Tipe Data yang Aman: json_serializable menghasilkan kode yang memperhatikan tipe data di Dart, sehingga meminimalkan kemungkinan error.

3. Performa yang Lebih Baik: Kode yang dihasilkan oleh json_serializable dikompilasi pada saat build, bukan pada runtime, sehingga memiliki performa yang lebih baik.

4. Mudah Dikustomisasi: Dengan json_annotation, kamu dapat menambahkan opsi untuk mengontrol konversi JSON dengan menambahkan parameter pada anotasi @JsonSerializable.

Menyesuaikan json_serializable dengan Anotasi json_annotation

json_annotation memungkinkan kita untuk menyesuaikan konversi JSON dengan menambahkan parameter pada anotasi @JsonSerializable. Misalnya, kamu bisa menyesuaikan nama field JSON yang dihasilkan atau mengatur agar field tertentu bersifat opsional.

Berikut beberapa parameter yang dapat digunakan:

• fieldRename: Mengubah aturan penamaan field.

• includeIfNull: Mengontrol apakah field null akan disertakan dalam JSON atau tidak.

Contoh:

@JsonSerializable(includeIfNull: false, fieldRename: FieldRename.snake)
class User {
  final int id;
  final String name;
  final String email;

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

  factory User.fromJson(Map<String, dynamic> json) => _$UserFromJson(json);
  Map<String, dynamic> toJson() => _$UserToJson(this);
}

Dalam contoh di atas, pengaturan includeIfNull: false akan menghilangkan field yang bernilai null dalam JSON. Sedangkan fieldRename: FieldRename.snake akan mengonversi nama field menjadi snake_case.

Kesimpulan

Dengan json_serializable dan json_annotation, proses serialisasi dan deserialisasi JSON di Flutter dapat dilakukan secara otomatis, aman, dan efisien. Selain menghemat waktu, keduanya membuat kode lebih rapi dan mudah dipelihara, sehingga sangat cocok untuk proyek yang melibatkan banyak operasi data berbasis JSON.