1. JavaScript Tidak Memiliki Tipe Data float atau double Terpisah
const a = 10;
const b = 10.0;
Jadi kalau kamu kirim nilai 10 atau 10.0 dari JS, JSON hasilnya adalah:
{ "value": 10 }
Tidak ada pembeda 10 dan 10.0 secara eksplisit dalam JSON.
2. Dart (Flutter) Memiliki Tipe double dan int Terpisah
Dart membedakan nilai integer (int) dan floating point (double)
Dart mengharapkan tipe yang jelas sesuai deklarasi
Jika API mengirim JSON { "lat": 10 }, maka saat di-deserialize ke double lat, Dart menganggap ini int, lalu butuh konversi eksplisit atau bisa error/bug
3. Masalah Default Nilai Bulat Tanpa Desimal di JS dan Dampaknya di Dart
Ketika data lokasi lat/long yang bernilai 10 dikirim dari JS, Dart melihatnya sebagai int bukan double
Jika di Dart properti lat/lng bertipe double, maka parsing dari int tanpa desimal bisa memunculkan error atau peringatan tipe
Ini bukan bug Flutter, tapi memang beda tipe data
4. Fungsi .toFixed() di JavaScript Mengubah Number Jadi String
let lat = 10.12345;
let latFixed = lat.toFixed(2);
Hasilnya bukan number, tapi string
Kalau langsung kirim ke Flutter, Flutter akan dapat string "10.12" dan jika parse ke double harus ekstra hati-hati
5. Floating Point Precision Issue di JavaScript
- Ini masalah umum di semua bahasa yang menggunakan IEEE 754, misal:
0.1 + 0.2 === 0.3
Jadi perhitungan floating point tidak pernah 100% presisi, ini wajar dan perlu dipahami
Solusinya: gunakan pembulatan dengan toFixed (ingat hasil string), atau paket khusus untuk aritmatika desimal presisi (contoh: decimal.js)
🧰 Rekomendasi Solusi Praktis
A. Pastikan Semua Lat/Long Selalu Number, Jangan String
const lat = 10.12345;
const latFixed = Number(lat.toFixed(2));
B. Kirim JSON dengan Nilai Number Konsisten
Jika nilai lat/long bulat (misal 10), tetap kirim sebagai 10
Di Dart, jika tipe double, cukup lakukan konversi eksplisit saat deserialize:
double lat = (json['lat'] as num).toDouble();
C. Hindari Floating Point Precision Issue dengan Pembulatan
- Saat lakukan operasi seperti penjumlahan, pembulatan dulu hasilnya agar presisi
D. Di Dart, Gunakan Parsing Aman dari num ke double
double parseDouble(dynamic value) {
if (value is int) return value.toDouble();
if (value is double) return value;
if (value is String) return double.tryParse(value) ?? 0.0;
return 0.0;
}
Gunakan fungsi ini untuk deserialize lat/long dari JSON.
📄 Contoh Artikel Lengkap
Kenapa Nilai Float di JavaScript dan Dart Kadang Berbeda dan Cara Mengatasinya
Saat membangun aplikasi mobile Flutter yang berkomunikasi dengan backend JavaScript (Node.js/Express/Next.js), kamu mungkin menemui masalah saat mengirim dan menerima data tipe angka desimal seperti latitude dan longitude.
1. JavaScript Memiliki Satu Tipe Angka: Number
JavaScript tidak membedakan angka bulat dan desimal secara eksplisit. Jadi angka 10 dan 10.0 dianggap sama dan disimpan sebagai 10.
2. Dart Membedakan int dan double
Dart memerlukan konversi eksplisit antara integer dan floating point. Jika backend mengirim 10 tanpa desimal, Flutter bisa menganggapnya int, sedangkan variabel Flutter kamu bertipe double. Ini bisa menyebabkan error.
3. .toFixed() Menghasilkan String
Fungsi .toFixed(2) di JS akan mengubah angka menjadi string, seperti "10.00". Kirim string ini ke Flutter tanpa konversi ke number akan menyebabkan parsing error.
4. Floating Point Presisi Terbatas
Penjumlahan seperti 1.1 + 2.2 di JavaScript bisa menghasilkan angka tidak presisi (3.3000000000000003). Ini masalah umum IEEE 754, dan kamu perlu lakukan pembulatan untuk akurasi.
Solusi
Gunakan Number(value.toFixed(2)) agar hasilnya tetap number, bukan string.
Kirim data JSON dengan tipe angka konsisten.
Di Flutter, gunakan toDouble() untuk convert dari int ke double.
Buat fungsi parsing yang aman dari berbagai tipe.
Untuk operasi matematika penting, lakukan pembulatan atau gunakan library angka presisi.
