I am currently working on a data table that has three text buttons that will decide the maximum number of rows to be displayed in real-time. The limitations (text buttons) are "5", "10" and "All". The initial solution that I can think of is to create two queries one with a limit and one with not, and a stream query snapshot variable that will hold it. For instance, if the variable numOfRows hold a value of "5" then it will add limit of "5" to the query, same with 10 else, there is no limit. The problem when the query was assigned to the stream variable, it seems like the stream builder cannot read it as there are no document/s being displayed. Here is a sneak peak of my code, and the image of the output.
I initialized first the needed variable
int numberOfRows = 5;
late final Stream<QuerySnapshot> _patientStream;
Then I directly write the query in the initState()
@override
void initState() {
super.initState();
getPatient();
updateTriageResult();
if (numberOfRows != 5 || numberOfRows != 10) {
_patientStream = patients
.where('hospital_user_id', isEqualTo: myString)
.orderBy("triage_result")
.where('Status', isEqualTo: 'pending')
.limit(5)
.snapshots();
}else{
_patientStream = patients
.where('hospital_user_id', isEqualTo: myString)
.orderBy("triage_result")
.where('Status', isEqualTo: 'pending')
.snapshots();
}
}
Then I called the _patientStream in StreamBuilder. I'll be attaching the whole block of code for the StreamBuilder hopefully it can help in analyzing the problem.
@override
Widget build(BuildContext context) {
return StreamBuilder<QuerySnapshot>(
stream: _patientStream,
builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
if (snapshot.hasError) {
return Text('Error: ${snapshot.error}');
}
if (snapshot.connectionState == ConnectionState.waiting) {
print(myString);
return CircularProgressIndicator();
}
return Column(
children: [
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: SingleChildScrollView(
scrollDirection: Axis.vertical,
child: DataTable(
columns: const <DataColumn>[
DataColumn2(label: Text('Name', style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold,))),
DataColumn(label: Text('Age',style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold,))),
DataColumn(label: Text('Gender',style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold,))),
DataColumn(label: Text('Birthday',style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold,))),
DataColumn(label: Text('Phone Number',style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold,))),
DataColumn(label: Text('Triage Result',style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold,))),
DataColumn(label: Text('Full Information',style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold,))),
],
rows: snapshot.data!.docs.map((DocumentSnapshot doc) {
final rowData = doc.data() as Map<String, dynamic>;
// Return the corresponding string based on the value of "Triage Result"
String triageResult = rowData['triage_result'].toString();
List<String> listSymptoms = List<String>.from(rowData['Symptoms']);
if (rowData['triage_result'] == 'A') {
triageResult = 'Emergency Case';
//print(triageResult);
} else if (rowData['triage_result'] == 'B') {
triageResult = 'Priority Case';
} else if (rowData['triage_result'] == 'C'){
triageResult = 'Non-urgent Case';
}
// create view button widget
final viewButton = viewPatientInfo(context, rowData, doc, triageResult, listSymptoms);
return DataRow(cells: [
DataCell(Center(child: Text(rowData['Name']))),
DataCell(Center(child: Text(rowData['Age'].toString()))),
DataCell(Center(child: Text(rowData['Sex']))),
DataCell(Center(child: Text(rowData['Birthday']))),
DataCell(Center(child: Text(rowData['Contact Number']))),
DataCell(Center(child: Text(triageResult))),
DataCell(Center(child: viewButton)),
]);
}).toList(),//.sublist(0, numberOfRows),
),
),
),
SizedBox(height: 10),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
TextButton(
onPressed: () {
setState(() {
numberOfRows = 5;
});
},
child: Text('5'),
),
SizedBox(width: 10),
TextButton(
onPressed: () {
setState(() {
numberOfRows = 10;
});
},
child: Text('10'),
),
SizedBox(width: 10),
TextButton(
onPressed: () {
setState(() {
numberOfRows = snapshot.data!.docs.length;
});
},
child: Text('All'),
),
],
),
],
);
},
);
}