[Flutter]TableのTableRowを動的に作るには？

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

TableのTableRowを動的に作る方法を紹介します。

方法

TableのTableRowを動的に作るには、List.generateを使います。

まず、Tableの引数「children」にList.generateを指定します。

そして、List.generateの第１引数にTableRowの数、第２引数のコールバック関数でTableRowを返します。

Table(
  children: List.generate(
    row.length,
    (index) => TableRow(
      children: [・・・・],
    ),
  ),
),

List.generateは、TableのTableRowをを動的に作ります。

使用例

  var user = [
    "Taro",
    "Hanako",
    "Eri",
    "Koji",
  ];

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Center(
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Table(
              children: List.generate(
                user.length,
                (index) => TableRow(
                  
                  children: [
                    Text(user[index]),
                    Text("番号：$index"),
                  ],
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }