[Flutter]DataTable(データテーブル)に固定ヘッダー(fixed header)を表示するには？

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

DataTableにスクロールしてもずっと表示される固定ヘッダーを表示する方法を紹介します。

方法
使用例

方法

DataTableに固定ヘッダーを表示するには、Columnを使います。

まず、DataTableをSingleChildScrollViewでラップし、SingleChildScrollViewをSizedBoxでラップします。

SizedBoxには、DataTableの高さを設定します。

次に、SizedBoxをColumnでラップします。

最後に、SizedBoxの上にヘッダーを指定します。

Column(
  children: [
    Header(), //固定ヘッダー
    SizedBox(
      height: /*高さ*/,
      child: SingleChildScrollView(
        child: DataTable(
          columns: [・・・],
          rows: [・・・],
        ),
      ),
    ),
  ],
),

これでDataTableに固定ヘッダーを表示することが出来ます。

使用例

以下は、使用例です。

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Column(
          children: [
            Container(
              height: 70,
              width: double.infinity,
              child: Text(
                'Sample Data',
                style: TextStyle(color: Colors.white),
              ),
              color: Colors.blue,
              alignment: Alignment.center,
            ),
            SizedBox(
              width: double.infinity,
              height: 600,
              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(),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }