Updating Firestore Document Boolean value from ListTile Flutter - flutter

Question

I am developing an app that allows users to check kit within bags on vehicles at their base station.
I so far have the app working so that it takes the user information at log in, and shows the bags available at their particular station, in this case 'Test Station'. I can successfully show a listView with the relevant bag information from Firestore 'bags' collection.
What I would like to do, is when a user taps on a listTile, to update the Boolean value for that particular bag (essentially for that particular document within the bags collection) from false to true and back again. I then want the UI to show a green or red circle Icon accordingly.
I can only work out how to do this when I hardcode the docID for the doc I want to update the boolean of, rather than doing it dynamically dependant on which listTile the user taps on. All help to resolve this appreciated!!
so if I call this function when in the onTap:
CollectionReference bags = FirebaseFirestore.instance.collection('bags');
Future<void> updateBagStatus() {
return bags
.doc('test_bag')
.update({'isChecked': true})
.then((value) => print("isChecked Updated"))
.catchError((error) => print('Failed: $error'));
}
then I can flip the Boolean from false to true for that hardcoded bag.
and this is the rest of the code that shows how I construct the listView builder.
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
#override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
String thisUserFirstName = '';
String thisUserLastName = '';
String thisUserBase = '';
String thisStation = '';
String thisBagChecked = '';
CollectionReference usersCollection =
FirebaseFirestore.instance.collection('users');
CollectionReference bags = FirebaseFirestore.instance.collection('bags');
Future<void> updateBagStatus() {
return bags
.doc('test_bag')
.update({'isChecked': true})
.then((value) => print("isChecked Updated"))
.catchError((error) => print('Failed: $error'));
}
void _getData() async {
User user = FirebaseAuth.instance.currentUser!;
DocumentSnapshot thisUserSnapshot = await FirebaseFirestore.instance
.collection('users')
.doc(user.uid)
.get();
{
setState(
() {
thisUserFirstName = thisUserSnapshot['first name'];
thisUserLastName = thisUserSnapshot['last name'];
thisUserBase = thisUserSnapshot['base station'];
},
);
}
}
// return StreamBuilder(
// stream: isCheckedSnapshot,
// builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
// if (!snapshot.hasData) {
// print('There is no data');
// }
#override
void initState() {
super.initState();
_getData();
}
// int selectedIndex = 0;
#override
Widget build(BuildContext context) {
Stream<QuerySnapshot> bags = FirebaseFirestore.instance
.collection("bags")
.where("station", isEqualTo: thisUserBase)
.snapshots();
return Scaffold(
backgroundColor: Colors.grey[300],
appBar: AppBar(
leading: Icon(Icons.settings),
title: Text(
'Welcome $thisUserFirstName',
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16),
),
actions: [
Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: GestureDetector(
onTap: () {
FirebaseAuth.instance.signOut();
},
child: Row(
children: const [
Text('Sign Out'),
SizedBox(
width: 5,
),
Icon(Icons.logout),
],
),
),
),
],
),
body: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
SizedBox(height: 40),
MyProfileRow(
rowBanner: 'Signed in as:',
rowIcon: Icons.person,
userName: '$thisUserFirstName $thisUserLastName',
),
SizedBox(height: 20),
MyProfileRow(
rowBanner: 'Base Station:',
rowIcon: Icons.house,
userName: thisUserBase,
),
SizedBox(height: 30),
Text("All bags at $thisUserBase"),
SizedBox(
height: 10,
),
Expanded(
child: StreamBuilder<QuerySnapshot>(
stream: bags,
builder: (
BuildContext context,
AsyncSnapshot<QuerySnapshot> snapshot,
) {
if (snapshot.hasError) {
return Text('Error!');
}
if (snapshot.connectionState == ConnectionState.waiting) {
return CircularProgressIndicator();
}
final data = snapshot.requireData;
return ListView.builder(
itemCount: data.size,
itemBuilder: (context, index) {
return Padding(
padding: const EdgeInsets.all(5.0),
child: Card(
elevation: 5,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
child: ListTile(
title: Text('${data.docs[index]['name']}'),
subtitle: Text('${data.docs[index]['isChecked']}'),
trailing: Icon(
Icons.circle,
color: Colors.red,
),
onTap: updateBagStatus
// onTap: () {
// if (data.docs[index]['isChecked'] == true) {
// print('isChecked = True');
// }
// if (data.docs[index]['isChecked'] == false) {
// print('isChecked = False');
// }
// },
),
),
);
},
);
},
),
)
],
),
);
}
}
Click to see how I have Firestone set up:
Image of My Firestore Database:

Answer 1

Your approach is correct. You just need to pass the relevant values as function parameters as shown below:
Future<void> updateBagStatus(String docId, bool status) {
return bags
.doc(docId)
.update({'isChecked': status})
.then((value) => print("isChecked Updated"))
.catchError((error) => print('Failed: $error'));
}
onTap: () => updateBagStatus(!data.docs[index]['isChecked'], data.docs[index].id)