Flutterize : Membuat Todo List App Menggunakan Flutter dan Cloud Firestore (PART 3)

Setelah pada artikel sebelumnya kita sudah bisa membuat operasi insert, selanjutnya kita akan membuat operasi delete pada aplikasi yang kita buat sebelumnya.

Pertama, jadikan Dismissible Widget sebagai parent widget dari ListTile. Berikan parameter key dengan isi documentID. Ganti warna background Container Widget dengan warns merah. Jangan lupa berikan callback onDismissed untuk handle widget ketika di swipe kesamping supaya melakukan proses delete pada Cloud Firestore.

Sehingga kodenya menjadi seperti ini.

return ListView.builder(
  itemCount: snapshot.data.documents.length,
  itemBuilder: (context, index) {
    return Dismissible(
      key: Key(snapshot.data.documents[index].documentID),
      background: Container(color: Colors.red,),
      onDismissed: (direction) async {},
      child: ListTile(
        title: Text(snapshot.data.documents[index]['task']),
        subtitle: Text(snapshot.data.documents[index]['description']),
      ),
    );
  },
);

Selanjutnya, berikan proses delete pada parameter onDismissed.

Firestore.instance.collection('todo').document(snapshot.data.documents[index].documentID).delete();

Sehingga kode menjadi seperti ini.

return ListView.builder(
  itemCount: snapshot.data.documents.length,
  itemBuilder: (context, index) {
    return Dismissible(
      key: Key(snapshot.data.documents[index].documentID),
      background: Container(color: Colors.red,),
      onDismissed: (direction) async {
        Firestore.instance.collection('todo').document(snapshot.data.documents[index].documentID).delete();
      },
      child: ListTile(
        title: Text(snapshot.data.documents[index]['task']),
        subtitle: Text(snapshot.data.documents[index]['description']),
      ),
    );
  },
);

Maka aplikasi nya akan menjadi seperti ini.

Untuk proses edit nya akan ada di artikel selanjutnya.

See Ya’

Link Project : Github