分页数据表和 Firebase

Job*_*yNZ 6 firebase flutter google-cloud-firestore flutter-web

我浏览过互联网,但没有找到任何东西,而且我肯定不是唯一想要使用PagulatedDataTable和 Firebase 的人。

我有一个非常简单的表要创建:

带列表的页面

class CentreViewEnquiriesList extends StatefulWidget {
  final CentreData centreData;
  CentreViewEnquiriesList({this.centreData});
  @override
  _CentreViewEnquiriesList createState() => _CentreViewEnquiriesList();
}

class _CentreViewEnquiriesList extends State<CentreViewEnquiriesList> {
  int _rowsPerPage = PaginatedDataTable.defaultRowsPerPage;
  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Container(
        padding: EdgeInsets.all(20),
          child: PaginatedDataTable(
              header: Text('Enquiries'),
              columns: [
                DataColumn(label: Text('Enquiry Date')),
                DataColumn(label: Text('Enquiry Person')),
                DataColumn(label: Text('Enquiry Status')),
              ],
              source: EnquiryDataSource(widget.centreData),
              onRowsPerPageChanged: (r) {
                setState(() {
                  _rowsPerPage = r;
                });
              },
              rowsPerPage: _rowsPerPage,
          ),
      ),
    );
  }
}
Run Code Online (Sandbox Code Playgroud)

数据表源

class EnquiryDataSource extends DataTableSource {
CentreData centreData;
EnquiryDataSource(this.centreData);


  @override
  DataRow getRow(int index) {
    return DataRow.byIndex(index: index, cells: [
      DataCell(Text('Date Cell')),
      DataCell(Text('Name Cell')),
      DataCell(Text('Status Cell')),
    ]);
  }

  @override
  // TODO: implement isRowCountApproximate
  bool get isRowCountApproximate => true;

  @override
  // TODO: implement rowCount
  int get rowCount => 15;

  @override
  // TODO: implement selectedRowCount
  int get selectedRowCount => 0;

}
Run Code Online (Sandbox Code Playgroud)

通常我会使用类似 StreamBuilder 的东西,但因为它需要类有一个状态,所以它不起作用。

这是我获取数据的方式:

//List of Enquiries to show on CentreView Enquiries DataTable
  List<EnquiryData> _enquiryListFromSnapshot(QuerySnapshot snapshot){
    return snapshot.documents.map((doc) {
      return EnquiryData(
      enquiryID: doc.data['enquiryID'],
      parentFirstName: doc.data['firstName'],
      parentLastName: doc.data['lastName'],
      enquiryStatus: doc.data['enquiryStatus'],
      );
    });
  }

  //get stream of all enquiries
  Stream<List<EnquiryData>> get enquiries {
    return centresCollection.document(centreID).collection('enquiries').snapshots().map(_enquiryListFromSnapshot);
  }
Run Code Online (Sandbox Code Playgroud)