Search code examples
flutterdartdatatable

Flutter datatable heading how do I round the top heading?


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

    enter image description here