どうも、ちょげ(@chogetarou)です。
DataTableを横幅いっぱいにする方法を紹介します。
方法
DataTableを横幅いっぱいにするには、SizedBoxもしくはContainerを使います。
まず、DataTableをSizedBoxもしくはContainerでラップします。
そして、SixedBoxもしくはContainerの引数「width」にdouble.infinityを指定します。
SizedBox(
width: double.infinity,
child: DataTable(
columns: [
・・・
],
rows: [
・・・
],
),
),これでDataTableを横幅いっぱいにすることが出来ます。
使用例
以下は、使用例です。
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: SizedBox(
width: double.infinity,
child: DataTable(
columns: [
DataColumn(
label: Text('名前'),
),
DataColumn(
label: Text('年齢'),
),
DataColumn(
label: Text('性別'),
),
],
rows: [
for (var i = 0; i < 10; i++)
DataRow(
cells: [
DataCell(Text('${10 - i}郎')),
DataCell(Text('$i')),
DataCell(Text(i.isOdd ? '男' : '女')),
],
),
],
),
),
),
);
}
コメント