flutter DataTable标题如何在顶部标题上？

Question

我正在使用dataTable制作表，我想将标题行做像这个。只有headingRowColor参数，所以我真的不知道。
这是我到目前为止写的：

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'))]),
      ],
    );

Answer 1

最糟糕的解决方案是使用堆栈小部件，添加圆形容器并设置headingRowColor透明。

我设置headingRowheight 60和圆形容器高度为40，所以我需要将圆形容器 margin（60-40）/2 = 10设置为使其成为垂直中心。

@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))]),
              ],
            ),
          ),
        ],
      ),
    );
}

中构建它

我在桌面