[Flutter]DataTable(データテーブル)の色(color)をシマシマ(alternate)にする方法

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

DataTableの色をシマシマにする方法を紹介します。

方法
使用例

方法

DataTableの色をシマシマにするには、List.generateを使います。

まず、DataRowのリストをList.generateで生成するようにします。

そして、List.generateのインデックスを使って、DataRowの引数「color」が交互に切り替わるようにします。

  List<DataRow> _list = List.generate(
    /*データ数*/,
    (index) {
      return DataRow(
        color: MaterialStateProperty.all(
          index.isOdd ? /*奇数の色*/ : /*偶数の色*/,
        ),
        cells: [
          ・・・
        ],
      );
    },
  );

あとは、作成したリストをDataTableの引数「row」に指定します。

これでDataTableの色をしましまにすることが出来ます。

使用例

以下は、使用例です。

  List<DataRow> _list = List.generate(
    15,
    (index) {
      return DataRow(
        color: MaterialStateProperty.all(
          index.isEven ? Colors.blue[100] : Colors.blue[200],
        ),
        cells: [
          DataCell(Text('$index')),
          DataCell(Text('Prodauct $index')),
          DataCell(Text('${Random().nextInt(200) + 1}円')),
        ],
      );
    },
  );

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: DataTable(
          columns: [
            DataColumn(
              label: Text('ID'),
            ),
            DataColumn(
              label: Text('名前'),
            ),
            DataColumn(
              label: Text('値段'),
            ),
          ],
          rows: _list,
        ),
      ),
    );
  }