コード
Widget _table(List<DataColumn> columnList, List<DataRow> rowList) {
// ListViewで縦スクロール, SingleChildScrollViewで横スクロール設定している
return ListView(
children: [
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: DataTable(columns: columnList, rows: rowList),
)
],
);
}
これだけでできるなんてFlutterすごい。。。
全文
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final labels = List<DataColumn>.generate(5, (int index) =>
DataColumn(label: Text("ラベル$index")
), growable: false);
final values = List<DataRow>.generate(20, (int index) {
return DataRow(cells: [
DataCell(Text("山田$index郎")),
const DataCell(Text("男性")),
const DataCell(Text("2000/10/30")),
const DataCell(Text("東京都港区")),
const DataCell(Text("会社員")),
]);
}, growable: false);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Padding(
padding: const EdgeInsets.all(8.0),
child: _table(labels, values),
));
}
Widget _table(List<DataColumn> columnList, List<DataRow> rowList) {
// ListViewで縦スクロール, SingleChildScrollViewで横スクロール設定している
return ListView(
children: [
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: DataTable(columns: columnList, rows: rowList),
)
],
);
}
}
DataTableの基本的な使い方はこちらが参考になりました。
TableをColumnやRowなどの子として使いたいときの注意点
tableウィジェットをColumnやRowなどの子として使いたいときは、そのまま配置すると表が見えなくなってしまいます。
ダメな例
Column(
children: [
const Text("顧客一覧"),
_table(labels, values),
]
)
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F670405%2F049be518-b3fc-cb5b-a3a5-3f1472be6969.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=3a8d306e7b6f6ee8dc51bffe22a6ca9f)
これはテーブル自身が表示領域をどこまで広げていいのかわからなくなっているのが原因だと思います。
ので、改善案としてはExpandedウィジェットを使って 子ウィジェットが利用可能なスペースを目一杯埋めてあげるのが良さそうです。
改善例
Column(
children: [
const Text("顧客一覧"),
Expanded(child: _table(labels, values)),
]
)
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F670405%2Feac4af31-3a38-2d70-dd7b-d1fd4f22596a.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=8ea635af4c4db5c06cda822b2ae809c7)