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

Question

我可以在PaginatedDataTable上显示普通的文本域。但是我想在PaginatedDataTable上显示我的Firestore字段作为流构建器方法。我已经在网上搜索过了，但我找不到与我的要求相关的信息。如何将firestore数据导入到PaginatedDataTable源中。还有没有别的办法请让我知道。寻找解决方案，这是非常有用的，如果有get上的磁带行或可选行也。我只想从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;
}

你将不得不创建你的用户类来工作，这样你就能够填充你的源代码，如果你不想，你可以在你的DataTableSource中使用List<DataRow>而不是List<User>，并手动映射每个单元格。