Rellene un DataTable de flutter con datos de Firestore utilizando StreamBuilder

Question

Estoy intentando usar un StreamBuilder en Flutter para poblar dinámicamente un DataTable usando datos en Firestore. Un quesiton similar fue hecha por Gustavo que era muy útil, pero todavía parece que no puede conseguir el código para trabajar.

El error que recibo es '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. Este error obviamente indica que mi DataTable parece tener un número incongruente de celdas y columnas, pero no veo por qué es así porque he usado tres de cada uno.

Aquí está mi código:

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;
  }
}

¡Gracias de antemano por tu consejo!

Answer 1

No sé si lo nota o no, pero el número de columnas en su código es 4 mientras que el número de celdas es 3. Puede ver

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

Aquí el número de columnas es 4, Sugerencia, Nombre, Votos y Nombre del rapero. Mientras proporciona el número de celdas, proporciona 3 celdas.

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

Si observa su código, no se da cuenta de que el número de columnas y el número de celdas no coinciden.