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 digunakanjson_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.yam
l
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 fungsifromJson
dantoJson
.part 'user.g.dart';
: Bagian ini adalah deklarasi untuk file yang akan dihasilkan secara otomatis olehjson_serializable
._$UserFromJson(json)
dan_$UserToJson(this)
: Ini adalah fungsi yang akan di-generate secara otomatis olehjson_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
Kode Lebih Bersih: Tidak perlu menulis fungsi
fromJson
dantoJson
secara manual, yang membuat kode lebih bersih dan terstruktur.Tipe Data yang Aman:
json_serializable
menghasilkan kode yang memperhatikan tipe data di Dart, sehingga meminimalkan kemungkinan error.Performa yang Lebih Baik: Kode yang dihasilkan oleh
json_serializable
dikompilasi pada saat build, bukan pada runtime, sehingga memiliki performa yang lebih baik.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.