如何在flutter web上将PaginatedDataTable或数据表上的所有文档字段显示为firestore作为streambuilder？

Question

我能够在 PaginatoredDataTable 上显示普通文本字段。但我想将 PaginatoredDataTable 上的 Firestore 字段显示为流构建器方法。我在互联网上搜索过，但找不到与我的要求相关的内容。如何将 firestore 数据获取到 PaginatedDataTable 源中。或者有什么其他方法请告诉我。寻找解决方案，如果也有可磁带行或可选择行，则非常有用。我只想从 firestore 获取数据，而不是从 firebase auth 获取数据。我将 firestore 集合名称命名为“users”。我也有所不同 需要帮助 如何做到这一点？如果在PaginatedDataTable 中不可能，DataTable 也可以。

以下是我的示例 Firestore 集合和文档结构：

firestore collection name: users

documentID1-
    email: 'email1'
    name : 'name1'
    role : 'role1'
    uid  : 'uid1'

documentID2-
    email: 'email2'
    name : 'name2'
    role : 'role2'
    uid  : 'uid2'   

（20多个文件）

下面是我的示例代码，通常能够以普通文本显示：

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';

class AdminDashboard extends StatefulWidget {
  const AdminDashboard({Key? key}) : super(key: key);

  @override
  _AdminDashboardState createState() => _AdminDashboardState();
}

class _AdminDashboardState extends State<AdminDashboard> {
  final DataTableSource _allUsers = UsersData();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(16),
        child: PaginatedDataTable(
          header: const Text("Header Text"),
          rowsPerPage: 9,
          columns: const [
            DataColumn(label: Text('Uid')),
            DataColumn(label: Text('Name')),
            DataColumn(label: Text('Email')),
            DataColumn(label: Text('Role'))
          ],
          source: _allUsers,
        ),


      ),
    );
  }
}

class UsersData extends DataTableSource {
  //final List<Map<String, dynamic>> _allUsers = [{}];
  @override
  DataRow getRow(int index) {
    return DataRow.byIndex(
      index: index,
      cells: [
        DataCell(Text('row #$index')),
        DataCell(Text('name #$index')),
        DataCell(Text('name #$index')),
        DataCell(Text('name #$index')),
      ],
    );
  }

  @override
  bool get isRowCountApproximate => false;

  @override
  int get rowCount => 9;

  @override
  int get selectedRowCount => 0;
}

请找到下面的根据@xBurnsed 答案编辑后的错误图片。

Answer 1

还没有机会对此进行测试，但类似以下内容应该会为您指明正确的方向：

@override
Widget build(BuildContext context) {
  
    List<User> users;
    return StreamBuilder(
        padding: const EdgeInsets.all(16),
        stream: Firestore.instance.collection("[YOUR_COLLECTION_NAME").snapshots(),
        builder: (context, AsyncSnapshot<QuerySnapshot> snap) {
            users = snap.data.docs.map((e) => User.fromMap(e.data)).toList();
            final DataTableSource _allUsers = UsersData(users);
            if(snap.hasData){
                return PaginatedDataTable(
                  header: const Text("Header Text"),
                  rowsPerPage: 9,
                  columns: const [
                    DataColumn(label: Text('Uid')),
                    DataColumn(label: Text('Name')),
                    DataColumn(label: Text('Email')),
                    DataColumn(label: Text('Role'))
                  ],
                  source: _allUsers,
                );
            }
            else{
                return new Text('No data...');
            }
    });
}


class UsersData extends DataTableSource {
  final List<User> users;

  UsersData(this.users);
  
  DataRow getRow(int index) {
     return DataRow.byIndex(cells: [
      DataCell(Text(users[index].uid)),
      DataCell(Text(users[index].name)),
      DataCell(Text(users[index].email)),
      DataCell(Text(users[index].role)),
    ], index: index);
  }

  @override
  bool get isRowCountApproximate => false;

  @override
  int get rowCount => 9;

  @override
  int get selectedRowCount => 0;
}

您必须创建您的 User 类才能使其正常工作，以便您能够填充源，如果您不想，您始终可以List<DataRow>在 DataTableSource 中使用 a 而不是 aList<User>并手动映射每个单元格。