CODEWITHSUNDEEP
flutterflutter-layout
user3808307
user3808307

Reputation: 1571

Change divider color on DataRow only for rows and not for heading

I would like to change the divider color in a DataRow in a DataTable, only for the rows and not for the header row.

I can wrap the DataTable in a Theme widget to change the color

Center(
  child: Theme(
    data: Theme.of(context).copyWith(dividerColor: Colors.grey),
    child: DataTable(columns: [
       DataColumn(
       //....

but this affects also the headingRow

is there a way to prevent this? thank you

Upvotes: 0

Views: 897

Answers (1)

Bastin
Bastin

Reputation: 367

This is not possible using the default DataTable because DataTable uses the same Divider for every row including the header row.

But if it is really necessary, I have changed a little bit of code in the data_table.dart file that defines DataTable. this will get you what you want although changing the library files is not good practice:

Add this instead of line 893 - 909:

final BorderSide borderSide = Divider.createBorderSide(
    context,
    color: Colors.red, // Add this color for your data rows.
    width: dividerThickness
      ?? theme.dataTableTheme.dividerThickness
      ?? _dividerThickness,
);
final BorderSide borderSide2 = Divider.createBorderSide( // Adding this divider for the header row.
    context,
    color: Colors.blue, // The color of your header row divider.
    width: dividerThickness
      ?? theme.dataTableTheme.dividerThickness
      ?? _dividerThickness,
);
final Border? border = showBottomBorder
    ? Border(bottom: borderSide)
    : index == 0 ? null : index == 1 ? Border(top: borderSide2) : Border(top: borderSide); // Changed this that the first row uses the other divider.

The result: the result

Upvotes: 1

Related Questions