Flutter datatable heading how do I round the top heading?

Question

I'm making a table using DataTable and I would want to make the heading row like this. There's only headingRowColor parameter so I really have no idea.
Here's what I've written so far:

DataTable(
      columnSpacing: 35,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(20),  // this only make bottom rounded and not top
        color: const Color(0xE61B1D1C),
      ),
      headingRowColor: MaterialStateProperty.all<Color>(Color(0xE6292D2C)),
      columns: [
        DataColumn(label: Text("Referral Code", style: TextStyle(fontWeight: FontWeight.w400, fontSize: 12, color: Color(0xF2979797)), softWrap: true, textAlign: TextAlign.center,)),
        DataColumn(label: Text("Share (%)\nYou-Friend", style: TextStyle(fontWeight: FontWeight.w400, fontSize: 12, color: Color(0xF2979797)), softWrap: true, textAlign: TextAlign.center,)),
        DataColumn(label: Text("Friends", style: TextStyle(fontWeight: FontWeight.w400, fontSize: 12, color: Color(0xF2979797)))),
        DataColumn(label: Text("Vol. (USD)", style: TextStyle(fontWeight: FontWeight.w400, fontSize: 12, color: Color(0xF2979797)))),
      ],
      rows: [
        DataRow(cells: [DataCell(Text('ADHJKGO')), DataCell(Text('100-0')), DataCell(Text('0')), DataCell(Text('100'))]),
        DataRow(cells: [DataCell(Text('CXMDJEO')), DataCell(Text('50-50')), DataCell(Text('0')), DataCell(Text('2000'))]),
      ],
    );

Solution

The worst solution is to use stack widget, add rounded Container and set headingRowColor transparent.

I set headingRowHeight 60 and rounded Container height is 40, so I need to set rounded Container margin (60-40)/2 = 10 to make it vertical center.

@override
  Widget build(BuildContext context) {
    TextStyle cellStyle = TextStyle(color: Colors.white);
    TextStyle rowHeaderStyle = TextStyle(color: Colors.greenAccent);
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Stack(
        children: [
          // Add rounded container
          Container(
            width: MediaQuery.of(context).size.width,
            // set height 40
            height: 40,
            margin: EdgeInsets.symmetric(vertical: 10,horizontal: 14),
            decoration: BoxDecoration(
                color: Colors.blueGrey,
                borderRadius: BorderRadius.circular(20)
            ),
          ),
          Container(
            width: MediaQuery.of(context).size.width,
            child: DataTable(
              columnSpacing: 35,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(20),  // this only make bottom rounded and not top
                color: const Color(0xE61B1D1C),
              ),
              // set heading row height 60
              headingRowHeight: 60,
              headingRowColor: MaterialStateProperty.all<Color>(Colors.transparent),
              columns: [
                DataColumn(label: Text("Referral Code", style: TextStyle(fontWeight: FontWeight.w400, fontSize: 12, color: Color(0xF2979797)), softWrap: true, textAlign: TextAlign.center,)),
                DataColumn(label: Text("Share (%)\nYou-Friend", style: TextStyle(fontWeight: FontWeight.w400, fontSize: 12, color: Color(0xF2979797)), softWrap: true, textAlign: TextAlign.center,)),
                DataColumn(label: Text("Friends", style: TextStyle(fontWeight: FontWeight.w400, fontSize: 12, color: Color(0xF2979797)))),
                DataColumn(label: Text("Vol. (USD)", style: TextStyle(fontWeight: FontWeight.w400, fontSize: 12, color: Color(0xF2979797)))),
              ],
              rows: [
                DataRow(cells: [DataCell(Text('ADHJKGO',style: rowHeaderStyle,)), DataCell(Text('100-0',style: cellStyle,)), DataCell(Text('0',style: cellStyle)), DataCell(Text('100',style: cellStyle))]),
                DataRow(cells: [DataCell(Text('CXMDJEO',style: rowHeaderStyle)), DataCell(Text('50-50',style: cellStyle)), DataCell(Text('0',style: cellStyle)), DataCell(Text('2000',style: cellStyle))]),
              ],
            ),
          ),
        ],
      ),
    );
}

I build it in desktop

Comments

[MendelG]

Do you want to make the entire table with rounded corners, or just the top header?

[Leo]

@MendelG Only the top header which is the heading row, I want it to have the same rounded background like the image linked to imgur.. Sorry for the poor explanation..