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

推荐答案

最糟糕的解决方案是使用堆栈小部件,添加舍入Container并将headingRowColor设置为透明.

我设置了headingRowHeight 60,圆角Container高度为40,所以我需要设置圆角Container边距(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))]),
              ],
            ),
          ),
        ],
      ),
    );
}

我在桌面上构建它

enter image description here

Flutter相关问答推荐

当MyChangeNotifier更改时如何计算函数,而无需在构建方法中进行不必要的调用- Flutter

相同的Flutter 代码库,但Firebase登录适用于Web应用程序,但无法登录iOS应用程序

Flutter -如何停止块监听程序在后台堆栈中运行

CLI数据库连接后将SHA-1密钥添加到Firebase项目

在LinkedIn上分享Fighter和Web的链接会产生不同的结果

未处理的异常:第1行第5列出现错误:无效的媒体类型:应为/&;.从API获取数据时在Flutter中

Flutter 附近的连接

处理 flutter/dart 模型中的空值

创建仅定义导出的文件是否有意义?

hooks_riverpod 有用途吗

课程中的访问Provider

如何从列表中更新provider变量:Flutter列表和Provider优化指南

Flutter中如何实现带有变化图标的浮动操作按钮?

在我使用 flutter_riverpod stateprovider 重新保存代码之前,UI 主题状态不会更新

升级到 Flutter 3.10 后,Flutter 键盘填充不起作用. Flutter 3.10 如何防止 BottomSheet 被键盘覆盖?

Flutter ListView 在 Column 中工作但在 Row 中不工作

在 CircleAvatar 中放置芯片

setState 不会在第一次更新 - Flutter

带图像封面的 ElevatedButton

如何从我的Flutter 项目中删除错误?