title: Display firestore data with flutter in a DataTable
body: <p>I was trying the <a href="https://codelabs.developers.google.com/codelabs/flutter-firebase" rel="nofollow noreferrer">Firebase for Flutter</a> example app from Flutter's official documentation and changed the &quot;ListTile&quot; widget with &quot;DataTable&quot; and now the DataTable is printing a separate Datacolumn for every DataRow.
  ‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎
  please view the current <a href="https://i.stack.imgur.com/VVJ0j.png" rel="nofollow noreferrer">Output screenshot</a> and <a href="https://i.stack.imgur.com/wwsRb.png" rel="nofollow noreferrer">Database la‎‎‎‎‎‎‎‎‎‎‎yout</a>.‎‎‎
  ‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎</p>
  <pre><code>    import 'package:cloud_firestore/cloud_firestore.dart';
      import 'package:flutter/material.dart';
  
      void main() =&gt; runApp(MyApp());
  
      class MyApp extends StatelessWidget {
        @override
        Widget build(BuildContext context) {
          return MaterialApp(
            title: 'Baby Names',
            home: MyHomePage(),
          );
        }
      }
  
      class MyHomePage extends StatefulWidget {
        @override
        _MyHomePageState createState() {
          return _MyHomePageState();
        }
      }
  
      class Record {
        final String name;
        final String rName;
        final int votes;
        final DocumentReference reference;
  
        Record.fromMap(Map&lt;String, dynamic&gt; map, {this.reference})
            : assert(map['name'] != null),
              assert(map['r_name'] != null),
              assert(map['votes'] != null),
              name = map['name'],
              rName = map['r_name'],
              votes = map['votes'];
  
        Record.fromSnapshot(DocumentSnapshot snapshot)
            : this.fromMap(snapshot.data, reference: snapshot.reference);
  
        @override
        String toString() =&gt; &quot;Record&lt;$name:$votes:$rName&gt;&quot;;
      }
  
      class _MyHomePageState extends State&lt;MyHomePage&gt; {
        @override
        Widget build(BuildContext context) {
          return Scaffold(
            appBar: AppBar(title: Text('Baby Name Votes')),
            body: _buildBody(context),
          );
        }
  
        Widget _buildBody(BuildContext context) {
          return StreamBuilder&lt;QuerySnapshot&gt;(
            stream: Firestore.instance.collection('baby').snapshots(),
            builder: (context, snapshot) {
              if (!snapshot.hasData) return LinearProgressIndicator();
  
              return _buildList(context, snapshot.data.documents);
            },
          );
        }
  
        Widget _buildList(BuildContext context, List&lt;DocumentSnapshot&gt; snapshot) {
          return ListView(
            padding: const EdgeInsets.only(top: 20.0),
            children: snapshot.map((data) =&gt; _buildListItem(context, data)).toList(),
          );
        }
  
        Widget _buildListItem(BuildContext context, DocumentSnapshot data) {
          final record = Record.fromSnapshot(data);
  
          return Padding(
            key: ValueKey(record.name),
            padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
            child: Container(
              decoration: BoxDecoration(
                border: Border.all(color: Colors.grey),
                borderRadius: BorderRadius.circular(5.0),
              ),
              child: DataTable(
                columns: [
                  DataColumn(label: Text('Name')),
                  DataColumn(label: Text('Votes')),
                  DataColumn(label: Text('Rapper\nname')),
                ],
                rows: [
                  DataRow(cells: [
                    DataCell(Text(record.name)),
                    DataCell(Text(record.votes.toString())),
                    DataCell(Text(record.rName)),
                  ])
                ],
              ),
            ),
          );
        }
      }
  </code></pre>