[Flutter]DataTable(データテーブル)のDataRow(データロウ)の背景色(background color)を設定するには？

どうも、ちょげ(@chogetarou)です。

DataTableのDataRowの背景色を設定する方法を紹介します。

方法
1. １部
2. 全体
まとめ

方法

１部

１部のDataRowの背景色だけを変えるには、引数「color」を使います。

まず、DataRowの引数「color」にMaterialStateProperty.resolveWithを指定します。

そして、resolveWithの戻り値として、DataRowの背景色を指定します。

DataRow(
  color: MaterialStateProperty.resolveWith((states) {
      return /*色*/;
  }),
  cells: [
    ・・・
  ],
),

以下は、例です。

DataRow(
  color: MaterialStateProperty.resolveWith((states) {
      return Colors.yellow;
  }),
  cells: [
      DataCell(
          Text('5'),
       ),
       DataCell(
           Text('Product 5'),
       ),
       DataCell(
           Text('35円'),
       ),      
  ],
),

全体

全てのDataRowの背景色を設定するには、DataTableの引数「dataRowColor」を使います。

まず、DataTableの引数「dataRowColor」にMaterialStateProperty.resolveWithを指定します。

そして、resolveWithの戻り値として、全てのDataRowの背景色を指定します。

DataTable(
  dataRowColor: MaterialStateProperty.resolveWith((states) {
    return /*背景色*/;
  }),
  columns: [・・・],
  rows: [・・・],
),

以下は、使用例です。

DataTable(
  dataRowColor: MaterialStateProperty.resolveWith((states) {
    return Colors.blue[100];
  }),
  columns: [
    DataColumn(
      label: Text('id'),
    ),
    DataColumn(
      label: Text('名前'),
    ),
    DataColumn(
      label: Text('値段'),
    ),
  ],
  rows: _list
      .map(
        (e) => DataRow(
          cells: [
            DataCell(
              Text('${e['id']}'),
            ),
            DataCell(
              Text('${e['name']}'),
            ),
            DataCell(
              Text('${e['price']}円'),
            ),
          ],
        ),
      )
      .toList(),
),