Flutter : Menyimpan Data ke Dalam Firebase dengan TextField()

Baiklah ya, seteh kemarin kita belajar bagaimana menyimpan data static dari baris kode flutter kedalam firebase ( baca lengkapnya di artikel ini ).

Kali ini kita akan mencoba mengirimkan sebuah data yang kita inputkan melalui widget TextField() atau data bisa dinamis kedalam firebase.

Buka kembali projek kita sebelumnya yang bernama firebase ( artikel lengkap mengenai projek sebelumnya bisa diakses melalui halaman ini ) dengan VS Code :

Kita scroll baris kode kita cari bagian :

  void _tambahData() async {
    try {
      await firestore
          .collection("users")
          .doc("testusers")
          .set({
            'nama_depan': 'Ahmad', 
            'nama_belakang': 'Istakim'});
    } catch (e) {
      print(e);
    }
  }

Dari baris kode fungsi ini, kita bisa memahami bahwa kita memiliki

collection dengan nama users
doc dengan nama testusers
set dengan kolom nama_depan dan nama_belakang

Kita bisa melihat bahwa di bagian set ( bold ) data yang akan kita simpan secara static tertulis langsung dalam baris kode, data Ahmad akan diisikan ke nama_depan dan Istakim akan mengisi nama_belakang. Kita akan mengubah bagaimana nantinya value Ahmad dan Istakim digantikan dengan sebuah inputan TextField().

Bagian selanjutnya, kita scroll cari baris kode bagian :

body: Center(
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
     children: <Widget>[
      Text("Testing Firebase"),
     ],
    ),
  ),

Widget Text() kita ganti dengan dua buah widget TextField(), sehingga menjadi :

body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            TextField(),
            TextField(),
          ]
        ),
      ),

Berikan properti decoration : sehingga menjadi seperti :

body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            TextField(
              decoration: InputDecoration(
                hintText: 'Nama Depan'
              ),
            ),
            TextField(),
          ]
        ),
      ),

Begitupula di TextField() yang kedua.

Kemudian jalankan, hasilnya :

Perlu diketahui bahwa untuk run projek yang menggunakan firebase, sering terjadi error walaupun sebenarnya kode sudah benar jika dijalankan dengan pilihan run browser ( Microsoft Edge, Mozilla Firefox ataupun Google Chrome ). Sangat recomended penggunaan real device, bukan emulator ataupun debug via browser

Selanjutnya dibawah baris kode :

class _MyHomePageState extends State<MyHomePage> {
  final FirebaseFirestore firestore = FirebaseFirestore.instance;

Kita tambahkan dua controller untuk TextField() kita, menjadi :

class _MyHomePageState extends State<MyHomePage> {
  final FirebaseFirestore firestore = FirebaseFirestore.instance;
  TextEditingController namaDepan = new TextEditingController();
  TextEditingController namaBelakang = new TextEditingController();

Step selanjutnya kita masuk ke bagian body dan lihat widget TextField() untuk menambahkan controller-nya, menjadi :

body: Center(
        child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              TextField(
                decoration: InputDecoration(hintText: 'Nama Depan'),
                controller: namaBelakang, // menambahkan controller
              ),
              TextField(
                decoration: InputDecoration(hintText: 'Nama Belakang'),
                controller: namaBelakang, // menambahkan controller
              ),
            ]),
      ),

Di bagian ini, kita mengubah untuk fungsinya. Pada fungsi _tambahData() :

  //tambah data
  void _tambahData() async {
    try {
      await firestore
          .collection("users")
          .doc("testusers")
          .set({
            'nama_depan': 'Ahmad', 
            'nama_belakang': 'Istakim'});
    } catch (e) {
      print(e);
    }
  }

Kita ubah value-nya menjadi value yang diambil dari controller TextField(), menjadi :

  //tambah data
  void _tambahData() async {
    try {
      await firestore
          .collection("users")
          .doc("testusers")
          .set({
            'nama_depan': namaDepan.text, 
            'nama_belakang': namaBelakang.text
          });
    } catch (e) {
      print(e);
    }
  }

Nah, sampai bagian ini coba sekarang jalankan. Kita test, bagaimana hasilnya 👋

Jalankan dengan perintah flutter run

Sebelum itu cek pada basis data firebase kita, sebelum melakukan aksi tambah data.

Setelah berhasil run project, terlihat seperti di bawah ini :

Isi datanya, kemudian klik tombol biru ( + ) di kanan bawah itu.

Coba bagaimana hasilnya, cek di web firebase. Apakah berhasil mengubah datanya !?

Kalau hasilnya sama dengan gambar diatas, kayaknya gagal bukan ? 😁

Hal ini dikarenakan ada pesan :

W/Firestore( 4927): (24.4.1) [WriteStream]: (66c1030) Stream closed with status: Status{code=UNAVAILABLE, description=Channel shutdownNow invoked, cause=null}.
W/GooglePlayServicesUtil( 4927): com.example.firebase requires the Google Play Store, but it is missing.
E/GooglePlayServicesUtil( 4927): GooglePlayServices not available due to error 9
W/Firestore( 4927): (24.4.1) [GrpcCallProvider]: Failed to update ssl context: com.google.android.gms.common.GooglePlayServicesNotAvailableException

Ini bukan salah kita og, santai saja....

Hal ini dikarenakan kita tidak menggunakan real device, coba sekarang ganti ke real device dan jalankan. Bagaimana hasilnya 😁😎😌

Kalau di terminal tertera keterangan seperti di bawah ini, tandanya baris kode kita success gaes :

Hasil cek di web firebase :

Yeaaayyyy, finally we got it buddy 👌👋😌😋

Flutter : Menyimpan Data ke Dalam Firebase dengan TextField()

Posting Komentar

Formulir Kontak