Menampilkan Data dari Firebase

Malam kawan, masih semangat nih belajarnya ?

Pada artikel ini kita akan melanjutkan untuk menampilkan data sederhana yang tersimpan dalam firebase.

Masih ingat bukan sebelumnya kita belajar menyambungkan proyek flutter dan menyimpan data ke dalam firebase ? Sudah berhasilkah ? Harus berhasil banget sebelum lanjut di artikel ini ya

Sebelum lanjut, set firebase yang dipakai tambah seperti berikut 

Sebagai latihan, ikuti terlebih dahulu ya data dalam firebase maupun step by step yang disampaikan

Langkah pertama, tambahkan library cloud_firestore

flutter pub add cloud_firestore

Kemudian import 

Langkah berikutnya, pada bagian state class tambahkan Stream 

Tambahkan baris kode ini sebagai pengambil data yang menyuplai data ke dalam StreamBuilder
Buat fungsi _dataPengguna

Langkah ketiga,

Pada bagian body dalam widget Scaffold, isi dengan widget StreamBuilder

Dalam widget ini diperlukan dua properti yang wajib digunakan, yaitu stream dan builder

stream ini diisi dengan fungsi _dataPengguna sedangkan builder diisi dengan widget yang akan menampilkan data dari firebase, misalnya widget Text()

Keterangan:

1. Bila terdapat error akan memunculkan informasi "Kesalahan!"
2. Bila koneksi loading atau masih menunggu tersambung/mengambil data, maka akan menampilkan sebuah widget loading dengan CircularProgressIndicator()
3. Bagian snapshot.data!.docs merupakan perintah yang meyakinkan flutter bahwa proyek sudah aman dari null safety

Data yang telah diambil dan tersimpan dalam variabel data

snapshot.data!.docs.map(( DocumentSnapshot document ) {

               Map<String, dynamic> data = document.data()! as Map<String, dynamic>;

Ditampilkan dengan widget Text()

return Text(data["nama"] ?? 'Tidak Ada Data "nama"');

Keterangan

1. snapshot.data!.docs digunakan untuk mengambil daftar dokumen ( baris data ) yang ada di koleksi firebase
2. .map(...) mengubah setiap dokumen mentah dari firebase menjadi widget flutter.
3. document.data() as Map<String, dynamic> mengonversi data dokumen menjadi format map ( key : value ) agar bisa diakses berdasarkan nama field-nya.
4. ?? 'Tidak Ada Data' ini adalah null safety. Jika field "nama" atau "alamat" kosong di firebase, aplikasi tidak akan crash melainkan menampilkan teks peringatan tersebut.

Tips Visualisasi Data Firebase & Flutter

Garis besar logikanya adalah: Dengar Data → Cek Koneksi → Bongkar Isi Data → Tampilkan ke List.

Sudah selesai sampai sini

Lakukan uji coba menggunakan HP ya 

Akan error bila dijalankan dengan web browser, wajib dengan real device

Kemudian menampilkan data bisa juga diganti dengan widget lainnya, misal menggunakan widget ListTile()

Jalankan kembali

flutter run

Hasilnya

Data yang tersimpan dalam basis data firebase tampil di proyek kita 😇😍

Kalian ? Berhasil ?
Semangat...

Tambahan, misal ditambah properti lain seperti leading ataupun trailing dalam ListTile().