FlutterのDataTableは、表形式のデータを表示するためのウィジェットです。複数の行と列を持ち、テーブル内にテキストやアイコンなどのウィジェットを配置できます。DataTableを使用することで、データを整理し、視覚的に比較することができます。
プロパティと概要
DataTableには多くのプロパティがあります。以下に一部を紹介します。
| プロパティ名 | 説明 |
|---|---|
| columns | DataTable内に表示する列を定義 |
| rows | DataTable内に表示する行を定義 |
| sortColumnIndex | DataTableをソートする列のインデックスを指定 |
| sortAscending | ソート順を指定。真であれば昇順、偽であれば降順。 |
| onSelectAll | 全ての行を選択する際に呼ばれるコールバック関数を定義 |
| columnSpacing | 列間のスペースを設定するための値 |
| horizontalMargin | DataTableウィジェットの左右端と端の列との距離を設定するための値 |
| columnWidths | 各列の幅を指定するためのMap型の値 |
| dataRowHeight | 各行の高さを設定するための値 |
| headingRowHeight | 列名行の高さを設定するための値 |
| showCheckboxColumn | 左端にチェックボックス列を表示するかどうかを設定するための値 |
各プロパティの使い方
columns
DataTableのcolumnsプロパティには、DataColumnウィジェットのリストを指定します。DataColumnウィジェットは、テーブル内に表示する列を定義します。以下は、columnsプロパティに2つのDataColumnウィジェットを指定した例です。
DataTable(
columns: [
DataColumn(label: Text('名前')),
DataColumn(label: Text('年齢')),
],
rows: [...],
),rows
DataTableのrowsプロパティには、DataRowウィジェットのリストを指定します。DataRowウィジェットは、テーブル内に表示する行を定義します。以下は、rowsプロパティに2つのDataRowウィジェットを指定した例です。
DataTable(
columns: [...],
rows: [
DataRow(cells: [
DataCell(Text('太郎')),
DataCell(Text('20')),
]),
DataRow(cells: [
DataCell(Text('次郎')),
DataCell(Text('25')),
]),
],
),columns と rows を組み合わせたサンプル
実際に使用する場合には column と rows は必須項目となります。以下のように表データを作成します。
DataTable(
columns: [
DataColumn(label: Text('名前')),
DataColumn(label: Text('年齢')),
],
rows: [
DataRow(cells: [
DataCell(Text('太郎')),
DataCell(Text('20')),
]),
DataRow(cells: [
DataCell(Text('次郎')),
DataCell(Text('25')),
]),
],
),
sortColumnIndex
DataTableのsortColumnIndexプロパティには、ソートする列のインデックスを指定します。以下は、年齢列をソートする例です。
DataTable(
sortColumnIndex: 1,
sortAscending: true,
columns: [...],
rows: [...],
),sortAscending
DataTableのsortAscendingプロパティには、ソート順を指定します。真であれば昇順、偽であれば降順です。以下は、年齢列を降順でソートする例です。
DataTable(
sortColumnIndex: 1,
sortAscending: false,
columns: [...],
rows: [...],
),onSelectAll
DataTableのonSelectAllプロパティには、全ての行を選択する際に呼ばれるコールバック関数を定義します。以下は、全ての行を選択した場合に呼ばれる関数を定義する例です。
DataTable(
columns: [...],
rows: [...],
onSelectAll: (isSelectedAll) {
// isSelectedAllは、全ての行が選択されたかどうかを示す真偽値です
if (isSelectedAll) {
// 全ての行が選択された場合の処理
} else {
// 全ての行が選択されていない場合の処理
}
},
),columnSpacing
columnSpacingプロパティは、列間のスペースを設定するための値です。デフォルト値は8.0で、この値はDataTableウィジェットの左右端と最初の列と最後の列の間に適用されます。各列の間に適用するには、DataColumnウィジェットにnumericプロパティを設定します。
DataTable(
columnSpacing: 20.0,
columns: [
DataColumn(label: Text('Column 1'), numeric: true),
DataColumn(label: Text('Column 2'), numeric: true),
DataColumn(label: Text('Column 3'), numeric: true),
],
rows: [...],
),horizontalMargin
horizontalMarginプロパティは、DataTableウィジェットの左右端と端の列との距離を設定するための値です。デフォルト値は24.0で、この値は左右の端と最初の列と最後の列の間に適用されます。各列の間に適用するには、DataColumnウィジェットにnumericプロパティを設定します。
DataTable(
horizontalMargin: 10.0,
columns: [
DataColumn(label: Text('Column 1'), numeric: true),
DataColumn(label: Text('Column 2'), numeric: true),
DataColumn(label: Text('Column 3'), numeric: true),
],
rows: [...],
),
columnWidths
columnWidthsプロパティは、各列の幅を指定するためのMap型の値です。この値を使用すると、すべての列の幅を同じにするのではなく、各列の幅を異なる値に設定することができます。このプロパティは、DataColumnウィジェットのnumericプロパティを使用して、数値データの列に幅を設定する場合に特に便利です。
DataTable(
columnWidths: {
0: FlexColumnWidth(2),
1: FlexColumnWidth(1),
2: FlexColumnWidth(3),
},
columns: [
DataColumn(label: Text('Column 1'), numeric: true),
DataColumn(label: Text('Column 2'), numeric: true),
DataColumn(label: Text('Column 3'), numeric: true),
],
rows: [...],
),dataRowHeight
dataRowHeightプロパティは、各行の高さを設定するための値です。デフォルト値は48.0で、この値はすべての行に適用されます。
DataTable(
dataRowHeight: 60.0,
columns: [...],
rows: [...],
),headingRowHeight
headingRowHeightプロパティは、列名行の高さを設定するための値です。デフォルト値は56.0で、この値は列名行に適用されます。
DataTable(
headingRowHeight: 80.0,
columns: [...],
rows: [...],
),showCheckboxColumn
showCheckboxColumnプロパティは、左端にチェックボックス列を表示するかどうかを設定するための値です。デフォルト値はfalseで、この値をtrueに設定すると、左端にチェックボックス列が表示されます。
DataTable(
showCheckboxColumn: true,
columns: [...],
rows: [...],
),サンプルコード
以下は、ヘッダーとデータのスタイルが異なる表を作成するサンプルコードです。この例では、DataTableウィジェットのcolumnsプロパティを使用して、各列のDataColumnウィジェットを定義し、rowsプロパティを使用して、各行のDataRowウィジェットを定義します。また、decorationプロパティを使用して、ヘッダー行とデータ行の背景色を設定します。
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Scaffold Widget Demo',
home: MyHomepage(),
);
}
}
class MyHomepage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('DataTable Test'),
),
body: Center(child: DataTableSample()),
);
}
}
class DataTableSample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return DataTable(
headingRowColor: MaterialStateProperty.all(Colors.grey[200]),
dataRowColor: MaterialStateProperty.all(Colors.white),
columns: [
DataColumn(
label: Text(
'Name',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.blue,
),
),
),
DataColumn(
label: Text(
'Age',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.red,
),
),
),
DataColumn(
label: Text(
'Gender',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.green,
),
),
),
],
rows: [
DataRow(
cells: [
DataCell(Text('John')),
DataCell(Text('25')),
DataCell(Text('Male')),
],
color: MaterialStateProperty.all(Colors.grey[100]),
),
DataRow(
cells: [
DataCell(Text('Mary')),
DataCell(Text('32')),
DataCell(Text('Female')),
],
),
DataRow(
cells: [
DataCell(Text('Mike')),
DataCell(Text('18')),
DataCell(Text('Male')),
],
color: MaterialStateProperty.all(Colors.grey[100]),
),
],
);
}
}
この例では、headingRowColorプロパティを使用して、ヘッダー行の背景色をグレーに設定し、dataRowColorプロパティを使用して、データ行の背景色を白に設定しています。各列のlabelプロパティを使用して、列名を設定し、styleプロパティを使用して、列名のテキストスタイルを定義しています。各行のcellsプロパティを使用して、行のデータを設定し、colorプロパティを使用して、行の背景色を設定しています。
まとめ
DataTableは、Flutterの表形式のデータを表示するためのウィジェットです。columnsプロパティにはDataColumnウィジェットのリストを、rowsプロパティにはDataRowウィジェットのリストを指定します。また、sortColumnIndexプロパティとsortAscendingプロパティを使用することで、テーブルのソートを行うことができます。onSelectAllプロパティには、全ての行を選択する際に呼ばれるコールバック関数を定義します。これらのプロパティを組み合わせることで、柔軟なテーブル表示が可能になります。