title: Flutter DataTable Layout
body: <p>I've got some layout trouble with <code>DataTable</code> in Flutter with a <code>FutureBuilder</code>, I've called the API and naturally it will display it like this:</p>
  <p><a href="https://i.stack.imgur.com/ZNNYo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZNNYo.png" alt="enter image description here" /></a></p>
  <p>Understandable, since I'm building a list of tables it will return multiple tables back. I want to map out only the Rows as a List and the columns should stay the same, exactly like this:</p>
  <p><a href="https://i.stack.imgur.com/OUKSx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OUKSx.png" alt="enter image description here" /></a></p>
  <p>So, the columns <code>First Name</code>, <code>Last Name</code> and <code>Delete</code> are always the same, it just maps out the table row cells like in the second picture above.</p>
  <p>Is this possible to achieve this with a <code>DataTable</code> using the <code>FutureBuilder</code> like in my example?</p>
  <p>I've tried using the future builder in a <code>DataRow</code> cell since every child of the <code>DataCell</code> is a Widget, but it looks really horrible and I'm not sure it is the right practice...</p>
  <p>Here is the code:</p>
  <p>The API call:</p>
  <pre><code>import 'dart:async';
  import 'dart:convert';
  import 'package:http/http.dart' as http;
  import 'models/names.dart';
  
  Future&lt;List&lt;NameData&gt;&gt; fetchNames() async {
    List&lt;NameData&gt; names = List();
    final response = await http.get('https://jsonplaceholder.typicode.com/posts');
  
    if (response.statusCode == 200) {
      // If the server did return a 200 OK response,
      // then parse the JSON.
      var namesJson = jsonDecode(response.body);
      print(response.body);
      for (int i = 0; i &lt; namesJson.length; i++) {
        names.add(NameData.fromJson(jsonDecode(response.body)[i]));
      }
      return names;
    } else {
      // If the server did not return a 200 OK response,
      // then throw an exception.
      throw Exception('Failed to load names');
    }
  }
  
  </code></pre>
  <p>The Names model:</p>
  <pre><code>import 'package:flutter/foundation.dart';
  import 'dart:core';
  
  class NameData extends ChangeNotifier {
    final int id;
    final int userId;
    final String title;
    final String body;
  
    NameData({
      this.id,
      this.userId,
      this.title,
      this.body,
    });
  
    factory NameData.fromJson(Map&lt;String, dynamic&gt; json) {
      return NameData(
        id: json[&quot;id&quot;],
        userId: json[&quot;userId&quot;],
        title: json[&quot;title&quot;],
        body: json[&quot;body&quot;],
      );
    }
  }
  
  </code></pre>
  <p>And the Names List with the Data table:</p>
  <pre><code>import 'package:flutter/material.dart';
  import 'models/names.dart';
  import 'services/name_api.dart';
  
  class NameList extends StatefulWidget {
    @override
    _NameList createState() =&gt; _NameList();
  }
  
  class _NameList extends State&lt;NameList&gt; {
    Future&lt;List&lt;NameData&gt;&gt; futureNames;
  
    @override
    void initState() {
      super.initState();
      futureNames = fetchNames();
    }
  
    @override
    Widget build(BuildContext context) {
      return Column(
        children: [
          SizedBox(
            height: 600,
            child: FutureBuilder&lt;List&lt;NameData&gt;&gt;(
              future: futureNames,
              builder: (context, snapshot) {
                if (snapshot.hasData) {
                  return ListView.builder(
                    itemCount: snapshot.data.length,
                    itemBuilder: (context, index) {
                      return Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        mainAxisAlignment: MainAxisAlignment.spaceAround,
                        children: [
                          SizedBox(
                            height: 12.0,
                          ),
                          Container(
                            decoration: BoxDecoration(
                              color: Colors.grey[300],
                              borderRadius: BorderRadius.all(
                                Radius.circular(12.0),
                              ),
                            ),
                            child: SingleChildScrollView(
                              scrollDirection: Axis.horizontal,
                              child: DataTable(
                                columns: &lt;DataColumn&gt;[
                                  DataColumn(
                                    label: Text(
                                      'First Name',
                                      style:
                                          TextStyle(fontStyle: FontStyle.italic),
                                    ),
                                  ),
                                  DataColumn(
                                    label: Text(
                                      'Last Name',
                                      style:
                                          TextStyle(fontStyle: FontStyle.italic),
                                    ),
                                  ),
                                  DataColumn(
                                    label: Text(
                                      'Delete',
                                      style:
                                          TextStyle(fontStyle: FontStyle.italic),
                                    ),
                                  ),
                                ],
                                rows: &lt;DataRow&gt;[
                                  DataRow(
                                    cells: &lt;DataCell&gt;[
                                      DataCell(
                                          Text('${snapshot.data[index].id}')),
                                      DataCell(
                                          Text('${snapshot.data[index].userId}')),
                                      DataCell(Icon(Icons.delete)),
                                    ],
                                  ),
                                ],
                              ),
                            ),
                          ),
                          SizedBox(
                            height: 16.0,
                          ),
                        ],
                      );
                    },
                  );
                } else if (snapshot.hasError) {
                  return Text(&quot;${snapshot.error}&quot;);
                }
                return Container();
              },
            ),
          ),
        ],
      );
    }
  }
  
  </code></pre>
  <p>Thank you in advance for your time and help.</p>