Flutter Slidable Widget does not get removed when onDismissed - flutter

Question

I am having trouble where a Slidable does not get removed when I pressed delete action as shown in an image below.
The problem is in class NotificationInputPage where onDismissed got triggered, but notificationList.removedAt(index); does not seems to work.
If you spot something isn't right, please let me know. Thank you so much.
return SlidableWidget(child: notification, onDismissed: (context) {
setState(() {
notificationList.removeAt(index);
print('deleted..');
});
});
Here is my code
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_slidable/flutter_slidable.dart';
class SlidableWidget extends StatelessWidget {
final Widget child;
final void Function(BuildContext context) onDismissed;
const SlidableWidget({required this.child, required this.onDismissed , Key? key}) : super(key: key);
#override
Widget build(BuildContext context) => Slidable(
child: child,
endActionPane: ActionPane(motion: ScrollMotion(), children: [
SlidableAction(
flex: 1,
onPressed: onDismissed,
backgroundColor: Colors.red,
foregroundColor: Colors.white,
icon: Icons.delete,
label: 'delete',
),
],
extentRatio: 0.2,),
);
}
import 'package:carwashqueue/constants/constants.dart';
import 'package:carwashqueue/constants/enumerations.dart';
import 'package:carwashqueue/models/carwash_notification.dart';
import 'package:carwashqueue/widget/slidable_widget.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
class NotificationInputPage extends StatefulWidget {
const NotificationInputPage({Key? key}) : super(key: key);
#override
_NotificationInputPageState createState() => _NotificationInputPageState();
}
class _NotificationInputPageState extends State<NotificationInputPage> {
DateTime thirtyDaysAgo = DateTime.now().subtract(const Duration(days: 30));
final _auth = FirebaseAuth.instance;
final _fireStore = FirebaseFirestore.instance;
#override
Widget build(BuildContext context) {
Stream<List<CarWashNotification>> readNotification() => _fireStore
.collection('notifications')
.orderBy('notification_date', descending: false)
.where('notification_date',
isGreaterThanOrEqualTo: thirtyDaysAgo)
.snapshots()
.map((snapshot) => snapshot.docs.map((doc) => CarWashNotification.fromJson(doc.data(), doc)).toList());
return Scaffold(
body: StreamBuilder<List<CarWashNotification>>(
stream: readNotification(),
builder: (context, snapshot) {
if (snapshot.hasError) {
return Text('There is an error. Please try again.');
} else if (snapshot.hasData) {
final notifications = snapshot.data!;
List<Widget> notificationList = notifications.map((e) => buildListTile(e)).toList();
// return ListView(children: notificationList,);
return ListView.separated(
itemBuilder: (context, index) {
final notification = notificationList[index];
return SlidableWidget(child: notification, onDismissed: (context) {
setState(() {
notificationList.removeAt(index);
print('deleted..');
});
});
},
separatorBuilder: (context, index) => Divider(),
itemCount: notificationList.length);
} else {
return Center(
child: Text('There is no notification at the moment.'));
}
}),
);
}
Widget buildListTile(CarWashNotification item) {
return ListTile(
leading: FaIcon(
FontAwesomeIcons.bullhorn,
size: 30.0,
color: mainColour1,
),
title: Text(item.title),
subtitle: Text(item.message.length > textLimit
? item.message.substring(0, textLimit) + '...'
: item.message),
onTap: () {
print('onTap');
},
);
}

Answer 1

You should use dissmissible widget for this.
Dissmissible Widget
Dissmissible Widget Swiping

Answer 2

Now I understand why item didn't get removed from the list.
Actually it did get removed but when setState function runs, it reruns the build method so all the items are retrieved from firebase and reassigned to the list. That's why the item looks like it's never been removed from the list.
So What I will need to do is to really delete selected item from firebase or I will need to use a different mechanism.