How to change background color of DataColumn in Flutter?

问题

I have a DataTable widget for displaying some data in tabular format. I wasn't able to find any way to change the background color of the DataColumn, it defaults to white.

I tried wrapping the label inside a Container but that does not help since the container takes the dimensions of the child.

Is there any easier way to set the background color of `DataColum'?

Below is some code for reference -

DataTable(
  dataRowHeight: 70,
  headingRowHeight: 60,
  rows: List.generate(4, (index) {
    return DataRow(
      cells: <DataCell>[
        DataCell(
          Text("Number",),
        ),
        DataCell(
          Text(
          "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
          ),
        ),
      ]
    );
  }),
  columns: [
    DataColumn(
      label: Text("Name"),
    ),
    DataColumn(
      label: Text("Description"),
    ),
  ],
)

回答1:

Now in flutter version 1.22, you can do it like this

DataTable(
    headingRowColor:
        MaterialStateColor.resolveWith((states) => Colors.blue),
    columns: [
       DataColumn(),
       DataColumn(),
                
    ],
           
    rows: [
      DataRow(
          cells: [
              DataCell(),
              DataCell(),
          ],
      ),
    ],
)

回答2:

For anyone still looking for an answer to this, I found out that it can be done by using IntrinsicWidth, Stack and Container. I have modified the height based on thebuggycoder's question which is 60. As The default dataRowHeight of DataTable widget is kMinInteractiveDimension, you can replace that accordingly!

     IntrinsicWidth(
          child: Stack(
            children: [
              Container(
                height: 60, // default would be kMinInteractiveDimension
                color: Colors.blue,
              ),
              DataTable(
                dataRowHeight: 70,
                headingRowHeight: 60,
                rows: List.generate(4, (index) {
                  return DataRow(cells: <DataCell>[
                    DataCell(
                      Text(
                        "Number",
                      ),
                    ),
                    DataCell(
                      Text(
                        "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
                      ),
                    ),
                  ]);
                }),
                columns: [
                  DataColumn(
                    label: Text("Name"),
                  ),
                  DataColumn(
                    label: Text("Description"),
                  ),
                ],
              ),
            ],
          ),
        )

回答3:

On a easy way if you want to highlight your column, instead of changing the background, change the color of text in DataColumn.

回答4:

Container with BoxDecoration -> Column/Row -> DataTable

You can use the BoxDecoration's gradient property too.

Check this tutorial: YouTube
Code Sample: GitHub

child: Container(
        width: MediaQuery.of(context).size.width - 40.0,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(12.0),
          color: Color(0xff5a348b),
          gradient: LinearGradient(
              colors: [Color(0xffebac38), Color(0xffde4d2a)],
              begin: Alignment.centerRight,
              end: Alignment(-1.0, -2.0)), //Gradient
        ),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.only(top: 8.0),
              child: Row(
                children: <Widget>[
                  DataTable(
                    columns: <DataColumn>[
                      DataColumn(
                        label: Text(
                          'Storage',
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: 16.0,
                          ),
                        ),
                      ),
                      DataColumn(
                        label: Text(
                          '1TB',
                          style: TextStyle(
                            fontWeight: FontWeight.bold,
                            color: Colors.white,
                            fontSize: 16.0,
                          ),
                        ),
                      ),
                    ],
                    rows: <DataRow>[
                      DataRow(cells: <DataCell>[
                        DataCell(
                          Text(
                            'Smart synchronization',
                            style: TextStyle(
                              color: Colors.white,
                              fontSize: 16.0,
                            ),
                          ),
                        ),
                        DataCell(
                          Icon(
                            Icons.add,
                            color: Colors.white54,
                          ),
                        ),
                      ]),
                      DataRow(cells: <DataCell>[
                        DataCell(
                          Text(
                            'Full text search',
                            style: TextStyle(
                              color: Colors.white,
                              fontSize: 16.0,
                            ),
                          ),
                        ),
                        DataCell(
                          Icon(
                            Icons.edit,
                            color: Colors.white54,
                          ),
                        ),
                      ]),
                    ],
                  ),
                ],
              ),
            ),
          ],
        ),
      ),

来源：https://stackoverflow.com/questions/58655599/how-to-change-background-color-of-datacolumn-in-flutter