[Flutter]DataTable(データテーブル)にDataRow(データロウ)を追加(add)するには？

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

DataTableにDataRowを追加する方法を紹介します。

方法
使用例

方法

DataTableにDataRowを追加するには、リストの変数を使います。

まず、DataTableで表示するDataRowをリストにします。

var _list = <DataRow>[
    DataRow(),
    DataRow(),
    DataRow(),
    ・・・
]

次に、このリストをDataTableの引数「rows」に指定します。

DataTable(
  columns: [
    ・・・
  ],
  rows: _list,
),

最後に、DataRowを追加したい場合に、リストにDataRowを追加します。

_list.add(
  DataRow(cells: [
    ・・・
  ]),
);

これでDataTableにDataRowを追加することが出来ます。

使用例

以下は、使用例です。

class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);

  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  List<DataRow> _list = List.generate(
    5,
    (index) {
      return DataRow(
        cells: [
          DataCell(Text('$index')),
          DataCell(Text('Prodauct $index')),
          DataCell(Text('${Random().nextInt(200) + 1}円')),
        ],
      );
    },
  );

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Column(
          children: [
            DataTable(
              columns: [
                DataColumn(
                  label: Text('ID'),
                ),
                DataColumn(
                  label: Text('名前'),
                ),
                DataColumn(
                  label: Text('値段'),
                ),
              ],
              rows: _list,
            ),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  _list.add(
                    DataRow(cells: [
                      DataCell(Text('${_list.length}')),
                      DataCell(Text('Prodauct ${_list.length}')),
                      DataCell(Text('${Random().nextInt(200) + 1}円')),
                    ]),
                  );
                });
              },
              child: Text('Add'),
            ),
          ],
        ),
      ),
    );
  }
}