Skip to main content

Morning Code- deleting new list tiles

 We are starting off with the ability to add multiple list tiles. These tiles are flat buttons that when clicked on will take you to the shopping list page. Right now when I click on them nothing happens. During today's Morning Code session I will change that. I will first add the ability to delete a list by long-pressing it. Using the Gesture Detector widget on long-press an alert dialog will appear and ask if you are sure you want to delete it. A yes will delete the document from the firebase firestore collection and a no will pop you back to the main screen. 






return GestureDetector(
onLongPress: () {
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Text("Are you sure you want to delete this list?"),
content: SingleChildScrollView(
child: Row(
children: [
MaterialButton(
child: Text("Yes"),
onPressed: () {
FirebaseFirestore.instance
.collection(userIdentification)
.doc(listId)
.delete();
},
),
MaterialButton(
child: Text("No"),
onPressed: () {
Navigator.pop(context);
},
),
],
),
));
});
},
child: FlatButton(

What I forgot to add was that after you deleted the list to pop back to the main screen. I also want to center the yes and no buttons by adding mainAxisAlignment to the row widget and setting that to center. I gave the buttons a blue color and a white text color. I put some space between the two buttons with a SizedBox widget. 


 

return AlertDialog(
title: Text(
"Are you sure you want to delete this list?",
textAlign: TextAlign.center,
),
content: SingleChildScrollView(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
MaterialButton(
child:
Text(
"Yes",
style:
TextStyle(fontSize: 20),
),
onPressed: () {
FirebaseFirestore.
instance
.collection(userIdentification)
.doc(
listId)
.delete();
Navigator.pop(context);
},
color: Colors.lightBlue,
textColor: Colors.white,

),
SizedBox(
width: 10,
),

MaterialButton(
child:
Text(
"No",
style:
TextStyle(fontSize: 20),
),
onPressed: () {
Navigator.
pop(context);
},
color: Colors.lightBlue,
textColor: Colors.white,

),
],
),
));

So now I have the functionality to add and delete list tiles. 

Comments