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