[Flutter]DataTable(データテーブル)にスクロールバー(scrollbar)を表示するには？

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

DataTableの右側にスクロールの位置を表現するスクロールバーを表示する方法を紹介します。

方法
使用例

方法

DataTableにスクロールバーを表示するには、Scrollbarを使います。

具体的には、DataTableをスクロールできるようにしているウェジェット(SingleChildScrollViewやListViewなど)をScrollbarでラップします。

Scrollbar(
  child: SingleChildScrollView(
    child: DataTable(
      columns: [・・・],
      rows: [・・・],
    ),
  ),
),

これでDataTableにスクロールバーが表示されるようになります。

使用例

以下は、使用例です。

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Scrollbar(
          isAlwaysShown: true,
          child: SingleChildScrollView(
            child: DataTable(
              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(),
            ),
          ),
        ),
      ),
    );
  }