Display another table row (table header/ title) in flutter with Table Widget

Question

I got a project, where a table widget was used instead of DataTable, So I have been able to pull my JSON data to the table row, but I am having issues showing the header for the table, I can use DataTable to achieve, but I am required to use the table widget.

This is what I have done so far

SingleChildScrollView(
          scrollDirection: Axis.horizontal,
          child: list.isEmpty
              ? Container(
                  alignment: Alignment.center,
                  child: CircularProgressIndicator())
              : Table(
                  columnWidths: const <int, TableColumnWidth>{
                    0: FixedColumnWidth(50),
                    1: FixedColumnWidth(300),
                    2: FixedColumnWidth(150),
                    3: FixedColumnWidth(300),
                    4: FixedColumnWidth(150),
                    5: FixedColumnWidth(300),
                    6: FixedColumnWidth(300),
                  },
                  children: list
                      .map((item) => _buildTableRow(
                          item, context))
                      .toList(),
                ),
        )

This is my build row function

TableRow _buildTableRow(UserModel item, context) {
        return TableRow(key: ValueKey(item.id), children:
  [
    tablecell(item.name),
    tablecell(item.email),
    tablecell(item.phone),
   
  ]
}

The challenge is to add titles to the table.

Answer 1

You can do

children:[ 
    /// your Header 
    ...list.map((item) => _buildTableRow(item, context)).toList(),
  ]