どうも、ちょげ(@chogetarou)です。
DataTableの区切り線の色を変える方法を紹介します。
方法
DataTableの区切り線の色を変えるには、ThemeのdividerColorを使います。
まず、DataTableをThemeでラップします。
次に、Themeの引数「data」にThemeDataを指定します。
そして、ThemeDataの引数「dividerColor」に区切り線の色を設定します。
Theme(
data: ThemeData(
dividerColor: /*区切り線の色*/,
),
child: DataTable(
columns: [
・・・
],
rows: [
・・・
]
),
),これでDataTableの区切り線の色を変えることが出来ます。
使用例
以下は、使用例です。
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: SizedBox(
child: Theme(
data: ThemeData(
dividerColor: Colors.red,
),
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(),
),
),
width: double.infinity,
),
),
);
}
コメント