title: how to get data in material datatable in flutter from rest api
body: <p>I want to show data in material dataTable but instead of getting data in a row it makes the table head every time with the row</p>
  <p>My design which I Want:
  <img src="https://i.stack.imgur.com/T044c.png" alt="Design I want" /></p>
  <p>The design I am getting right now:
  <img src="https://i.stack.imgur.com/p3H69.jpg" alt="Design I'm getting" /></p>
  <p>Here is the full code of my flutter application:</p>
  <pre><code>UI SCREEN
   ________________This is Ui part of my application_
  
  import 'package:aiims/bloc/add_relatives_bloc.dart';
  import 'package:aiims/models/relative.dart';
  import 'package:aiims/service/api.dart';
  import 'package:aiims/widgets/side_menu_widget.dart';
  import 'package:flutter/material.dart';
  import 'package:outline_material_icons/outline_material_icons.dart';
  import 'package:provider/provider.dart';
  import 'package:http/http.dart' as http;
  import 'dart:convert';
  import 'dart:async';
  
  class RelativeScreen extends StatefulWidget {
    @override
    _RelativeScreenState createState() =&gt; _RelativeScreenState();
  }
  
  class _RelativeScreenState extends State&lt;RelativeScreen&gt; {
    GlobalKey&lt;FormState&gt; _formKey = GlobalKey&lt;FormState&gt;();
  
    DataRow getDataRow(data) {
      return DataRow(
        cells: &lt;DataCell&gt;[
          DataCell(Text(data[&quot;name&quot;])),
          DataCell(Text(data[&quot;age&quot;])),
          DataCell(Text(data[&quot;relation&quot;])),
          DataCell(
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Icon(Icons.edit_outlined),
                Icon(Icons.delete_outline_sharp),
              ],
            ),
          ),
        ],
      );
    }
  
    @override
    void initState() {
      // TODO: implement initState
      super.initState();
      // _getDataRow(list.length);
    }
  
    // _getRelatives() {
    //   getRelativesList().then((Relative) {
    //     setState(() {
    //
    //     });
    //     print(&quot;Length: ${_relative.length}&quot;);
    //   });
    // }
    // DataRow _getDataRow(list) {
    //   return DataRow(
    //     cells: &lt;DataCell&gt;[
    //       DataCell(Text(list[&quot;name&quot;])),
    //       DataCell(Text(list[&quot;age&quot;])),
    //       DataCell(Text(list[&quot;relation&quot;])),
    //     ],
    //   );
    // }
  
    @override
    Widget build(BuildContext context) {
      final bloc = Provider.of&lt;AddNewRelativeBloc&gt;(context, listen: false);
      return Scaffold(
        drawer: NavDrawer(),
        appBar: AppBar(
          title: Text('Relatives'),
          actions: &lt;Widget&gt;[
            GestureDetector(
              onTap: () =&gt; _add_relavitves(),
              child: Padding(
                padding: const EdgeInsets.symmetric(horizontal: 16.0),
                child: Icon(Icons.add_circle_outline_rounded),
              ),
            ),
          ],
        ),
        body: SafeArea(
          child: Padding(
            padding: const EdgeInsets.all(5.0),
            child: Container(
              // alignment: Alignment.center,
              padding: EdgeInsets.symmetric(vertical: 20),
              child: SingleChildScrollView(
                child: Container(
                  child: FutureBuilder(
                      future: getRelativesList(),
                      // initialData: new TreatmentDetail(),
                      builder: (context, snapshot) {
                        if (snapshot.hasError) {
                          return Center(
                            child: Text(snapshot.error.toString()),
                          );
                        } else if (snapshot.connectionState ==
                            ConnectionState.done) {
                          return ListView.builder(
                              scrollDirection: Axis.vertical,
                              shrinkWrap: true,
                              itemCount: list.length,
                              itemBuilder: (context, index) {
                                return DataTable(
                                  headingRowColor: MaterialStateColor
                                      .resolveWith(
                                          (states) =&gt; Color(0xffff69b4)),
                                  // MaterialStateColor.resolveWith((states) =&gt; Colors.pink),
                                  columns: [
                                    DataColumn(label: Text(&quot;Name&quot;)),
                                    DataColumn(label: Text(&quot;Age&quot;)),
                                    DataColumn(label: Text(&quot;Relation&quot;)),
                                    DataColumn(label: Text(&quot;Action&quot;)),
                                  ],
                                  // rows: List.generate(
                                  //   list.length, (index) =&gt;
                                  //     _getDataRow(list[index]),
                                  // ));
                                  rows: [
                                    DataRow(
                                      cells: [
                                        DataCell(Text(list[index][&quot;name&quot;])),
                                        DataCell(Text(list[index][&quot;age&quot;])),
                                        DataCell(Text(list[index][&quot;relation&quot;])),
                                        DataCell(
                                          Row(
                                            mainAxisAlignment:
                                            MainAxisAlignment.spaceBetween,
                                            children: [
                                              Icon(Icons.edit_outlined),
                                              Icon(Icons.delete_outline_sharp),
                                            ],
                                          ),
                                        ),
                                      ],
                                    ),
                                    // DataRow(cells: [
                                    //   DataCell(Text('Ajay Singh')),
                                    //   DataCell(Text('25')),
                                    //   DataCell(Text('Son')),
                                    //   DataCell(
                                    //     Row(
                                    //       mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                    //       children: [
                                    //         Icon(Icons.edit_outlined),
                                    //         Icon(Icons.delete_outline_sharp),
                                    //       ],
                                    //     ),
                                    //   ),
                                    // ]),
                                  ],
                                );
                              });
                        } else {
                          return Center(
                            child: CircularProgressIndicator(),
                          );
                        }
                      }),
                ),
              ),
            ),
          ),
        ),
      );
    }
  
    void _add_relavitves() {
      final bloc = Provider.of&lt;AddNewRelativeBloc&gt;(context, listen: false);
      // set up the buttons
      // Widget cancelButton = FlatButton(
      //   child: Text(&quot;Cancel&quot;),
      //   onPressed: () {
      //     Navigator.pop(context);
      //   },
      // );
      Widget cancelButton = MaterialButton(
        child: Container(
          height: 40,
          width: 110,
          alignment: Alignment.center,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(20),
            color: Color(0xffff69b4),
          ),
          child: Text(
            &quot;Discard&quot;,
            style: TextStyle(
              color: Colors.white,
              fontSize: 20,
            ),
          ),
        ),
        onPressed: () {
          Navigator.pop(context);
        },
      );
  
      Widget continueButton = FlatButton(
        child: Text(&quot;Continue&quot;),
        onPressed: () {},
      );
  
      // set up the AlertDialog
      AlertDialog alert = AlertDialog(
        title: Center(
          child: Text(
            &quot;Add New Relative&quot;,
            style: TextStyle(
              fontSize: 20,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
        content: SingleChildScrollView(
          child: Container(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                SizedBox(height: 20),
                StreamBuilder&lt;Object&gt;(
                    stream: bloc.name,
                    builder: (context, snapshot) {
                      return TextField(
                        keyboardType: TextInputType.text,
                        decoration: InputDecoration(
                          hintText: &quot;Name&quot;,
                          labelText: &quot;Name&quot;,
                          errorText: snapshot.error,
                          border: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(10),
                          ),
                        ),
                        // onChanged: (value) =&gt; bloc.changeName,
                        onChanged: bloc.changeName,
                      );
                    }),
                SizedBox(height: 20),
                StreamBuilder&lt;Object&gt;(
                    stream: bloc.age,
                    builder: (context, snapshot) {
                      return TextField(
                        keyboardType: TextInputType.number,
                        decoration: InputDecoration(
                          hintText: &quot;Age&quot;,
                          labelText: &quot;Age&quot;,
                          errorText: snapshot.error,
                          border: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(10),
                          ),
                        ),
                        // onChanged: (value) =&gt; bloc.changeName,
                        onChanged: bloc.changeAge,
                      );
                    }),
                SizedBox(height: 20),
                StreamBuilder&lt;Object&gt;(
                    stream: bloc.relation,
                    builder: (context, snapshot) {
                      return TextField(
                        keyboardType: TextInputType.text,
                        decoration: InputDecoration(
                          hintText: &quot;Relation&quot;,
                          labelText: &quot;Relation&quot;,
                          errorText: snapshot.error,
                          border: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(10),
                          ),
                        ),
                        // onChanged: (value) =&gt; bloc.changeName,
                        onChanged: bloc.changeRelation,
                      );
                    }),
                SizedBox(height: 20),
                StreamBuilder&lt;Object&gt;(
                    stream: bloc.phoneNumber,
                    builder: (context, snapshot) {
                      return TextField(
                        keyboardType: TextInputType.number,
                        decoration: InputDecoration(
                          hintText: &quot;Phone Number&quot;,
                          labelText: &quot;Phone Number&quot;,
                          errorText: snapshot.error,
                          border: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(10),
                          ),
                        ),
                        // onChanged: (value) =&gt; bloc.changeName,
                        onChanged: bloc.changePhoneNumber,
                      );
                    }),
              ],
            ),
          ),
        ),
        actions: [
          cancelButton,
          _saveButton(),
        ],
      );
  
      // show the dialog
      showDialog(
        context: context,
        builder: (BuildContext context) {
          return alert;
        },
      );
    }
  
    Widget _saveButton() {
      final bloc = Provider.of&lt;AddNewRelativeBloc&gt;(context, listen: false);
  
      return StreamBuilder&lt;Object&gt;(
          stream: bloc.isValid,
          builder: (context, snapshot) {
            return GestureDetector(
              onTap: snapshot.hasError || !snapshot.hasData
                  ? null
                  : () {
                bloc.submit();
              },
              child: Container(
                height: 40,
                width: 130,
                alignment: Alignment.center,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(20),
                  color: snapshot.hasError || !snapshot.hasData
                      ? Color(0xffff69b4)
                      : Colors.green,
                ),
                child: Text(
                  &quot;Save&quot;,
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 20,
                  ),
                ),
              ),
            );
          });
    }
  }
  
  
  //My Future for getting response from api
  Future&lt;List&gt; getRelativesList() async {
    final response =
    await http.get(&quot;$baseUrl&quot;);
    Map&lt;String, dynamic&gt; map = json.decode(response.body);
    List&lt;dynamic&gt; data = map[&quot;data&quot;];
    print(&quot;first id on console&quot; + data[0][&quot;id&quot;].toString());
    return list = data;
  }
  
  
  //Here is my model
  class Relative {
    int _code;
    String _message;
    List&lt;Data&gt; _data;
  
    Relative({int code, String message, List&lt;Data&gt; data}) {
      this._code = code;
      this._message = message;
      this._data = data;
    }
  
    int get code =&gt; _code;
    set code(int code) =&gt; _code = code;
    String get message =&gt; _message;
    set message(String message) =&gt; _message = message;
    List&lt;Data&gt; get data =&gt; _data;
    set data(List&lt;Data&gt; data) =&gt; _data = data;
  
    Relative.fromJson(Map&lt;String, dynamic&gt; json) {
      _code = json['code'];
      _message = json['message'];
      if (json['data'] != null) {
        _data = new List&lt;Data&gt;();
        json['data'].forEach((v) {
          _data.add(new Data.fromJson(v));
        });
      }
    }
  
    Map&lt;String, dynamic&gt; toJson() {
      final Map&lt;String, dynamic&gt; data = new Map&lt;String, dynamic&gt;();
      data['code'] = this._code;
      data['message'] = this._message;
      if (this._data != null) {
        data['data'] = this._data.map((v) =&gt; v.toJson()).toList();
      }
      return data;
    }
  }
  
  class Data {
    int _id;
    int _patientId;
    String _name;
    String _age;
    String _relation;
    String _phoneNo;
  
    Data(
        {int id,
          int patientId,
          String name,
          String age,
          String relation,
          String phoneNo}) {
      this._id = id;
      this._patientId = patientId;
      this._name = name;
      this._age = age;
      this._relation = relation;
      this._phoneNo = phoneNo;
    }
  
      enter code here
  
    int get id =&gt; _id;
    set id(int id) =&gt; _id = id;
    int get patientId =&gt; _patientId;
    set patientId(int patientId) =&gt; _patientId = patientId;
    String get name =&gt; _name;
    set name(String name) =&gt; _name = name;
    String get age =&gt; _age;
    set age(String age) =&gt; _age = age;
    String get relation =&gt; _relation;
    set relation(String relation) =&gt; _relation = relation;
    String get phoneNo =&gt; _phoneNo;
    set phoneNo(String phoneNo) =&gt; _phoneNo = phoneNo;
  
    Data.fromJson(Map&lt;String, dynamic&gt; json) {
      _id = json['id'];
      _patientId = json['patient_id'];
      _name = json['name'];
      _age = json['age'];
      _relation = json['relation'];
      _phoneNo = json['phone_no'];
    }
  
    Map&lt;String, dynamic&gt; toJson() {
      final Map&lt;String, dynamic&gt; data = new Map&lt;String, dynamic&gt;();
      data['id'] = this._id;
      data['patient_id'] = this._patientId;
      data['name'] = this._name;
      data['age'] = this._age;
      data['relation'] = this._relation;
      data['phone_no'] = this._phone`enter code here`No;
      return data;
    }
  }
  </code></pre>