Füllen Sie eine flatternde DataTable mit Daten aus dem Firestore mit einem StreamBuilder

Question

Ich versuche, einen StreamBuilder in Flutter zu verwenden, um eine DataTable mithilfe von Daten in Firestore dynamisch zu füllen. Eine ähnliche Frage wurde von Gustavo gestellt, was hilfreich war, aber ich kann meinen Code immer noch nicht zum Laufen bringen.

Der Fehler, den ich erhalte, ist 'package:flutter/src/material/data_table.dart': Failed assertion: line 429 pos 15: '!rows.any((DataRow row) => row.cells.length != columns.length)': is not true. Dieser Fehler weist offensichtlich darauf hin, dass meine DataTable eine inkongruente Anzahl von Zellen und Spalten zu haben scheint, aber ich kann nicht erkennen, warum dies der Fall ist, da ich jeweils drei verwendet habe.

Hier ist mein Code:

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

class SkillsMatrixOverall extends StatefulWidget {
  @override
  _SkillsMatrixOverallState createState() => _SkillsMatrixOverallState();
}

@override
class _SkillsMatrixOverallState extends State<SkillsMatrixOverall> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Baby Name Votes')),
      body: new StreamBuilder(
        stream: FirebaseFirestore.instance.collection('baby').snapshots(),
        builder: (context, snapshot) {
          if (!snapshot.hasData) return new Text('Loading...');
          return new DataTable(
            columns: <DataColumn>[
              new DataColumn(
                label: Text('Suggestions'),
              ),
              new DataColumn(label: Text('Name')),
              new DataColumn(label: Text('Votes')),
              new DataColumn(label: Text('Rapper name')),
            ],
            rows: _createRows(snapshot.data),
          );
        },
      ),
    );
  }

  List<DataRow> _createRows(QuerySnapshot snapshot) {
    List<DataRow> newList =
        snapshot.docs.map((DocumentSnapshot documentSnapshot) {
      return new DataRow(cells: [
        DataCell(Text(documentSnapshot.data()['Name'].toString())),
        DataCell(Text(documentSnapshot.data()['Votes'].toString())),
        DataCell(Text(documentSnapshot.data()['Rapper name'].toString())),
      ]);
    }).toList();

    return newList;
  }
}

Vielen Dank im Voraus für Ihren Rat!

Answer 1

Ich weiß nicht, ob Sie es bemerken oder nicht, aber die Anzahl der Spalten in Ihrem Code beträgt 4, während die Anzahl der Zellen 3 beträgt. Sie können sehen

columns: <DataColumn>[
              new DataColumn(
                label: Text('Suggestions'),
              ),
              new DataColumn(label: Text('Name')),
              new DataColumn(label: Text('Votes')),
              new DataColumn(label: Text('Rapper name')),
            ],

Hier ist die Anzahl der Spalten 4, Vorschlag, Name, Stimmen und Rapper-Name. Während Sie die Anzahl der Zellen angeben, stellen Sie 3 Zellen bereit.

return new DataRow(cells: [
        DataCell(Text(documentSnapshot.data()['Name'].toString())),
        DataCell(Text(documentSnapshot.data()['Votes'].toString())),
        DataCell(Text(documentSnapshot.data()['Rapper name'].toString())),
      ]);

Wenn Sie sich Ihren Code ansehen, wird nicht bemerkt, dass die Anzahl der Spalten und die Anzahl der Zellen nicht übereinstimmen.