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

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

Pertama, tambahkan jadikan Dismissible Widget menjadi parent widget dari ListTile. Berikan parameter key dengan isi documentID, background diisi oleh Container Widget dengan memberikan parameter color merah. jangan lupa berikan parameter 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

Leave a Reply

Your email address will not be published. Required fields are marked *