I want to display some data in a DataTable
, i have 9 columns, all of them are number except the first one.
The problem i'm having is, i only see the first 5 columns, not because data are too long, but because there are a lot of space between every column.
Is there a way to make the DataColumn wrap the data with a padding i choose? This is my code:
Scaffold(
appBar: AppBar(
title: Text('DataTable Sample'),
),
body: Container(
child: DataTable(columns: <DataColumn>[
DataColumn(
label: Text('Name'),
),
DataColumn(
label: Text('A'),
),
DataColumn(
label: Text('B'),
),
DataColumn(
label: Text('C'),
),
DataColumn(
label: Text('D'),
),
DataColumn(
label: Text('E'),
),
DataColumn(
label: Text('F'),
),
DataColumn(
label: Text('G'),
),
DataColumn(
label: Text('H'),
),
], rows: <DataRow>[
DataRow(cells: [
DataCell(Text('1 Boston')),
DataCell(Text('3')),
DataCell(Text('3')),
DataCell(Text('7')),
DataCell(Text('1')),
DataCell(Text('30')),
DataCell(Text('8')),
DataCell(Text('+2')),
DataCell(Text('-22')),
]),
DataRow(cells: [
DataCell(Text('2 London')),
DataCell(Text('3')),
DataCell(Text('4')),
DataCell(Text('12')),
DataCell(Text('44')),
DataCell(Text('7')),
DataCell(Text('44')),
DataCell(Text('-98')),
DataCell(Text('0')),
]),
DataRow(cells: [
DataCell(Text('3 Rome')),
DataCell(Text('10')),
DataCell(Text('50')),
DataCell(Text('90')),
DataCell(Text('4')),
DataCell(Text('7')),
DataCell(Text('33')),
DataCell(Text('+5')),
DataCell(Text('-61')),
]),
]
)
),
);
Yes. Lately flutter team merged an update to this Widget. It is now only in the "master" channel (You are probably on "stable"), to switch run flutter channel master
and then flutter upgrade
in the terminal. After doing so you can control the space between each column by setting the columnSpacing
parameter of DataTable
. For further information check out this closed issue
you can use SingleChildScrollView
and FittedBox
as its child.
Scaffold(
appBar: AppBar(
title: Text('DataTable Sample'),
),
body: SingleChildScrollView(
scrollDirection: Axis.vertical,
child: FittedBox(
child: DataTable(
columns: <DataColumn>[
DataColumn(
label: Text('Name'),
),
DataColumn(
label: Text('A'),
),
DataColumn(
label: Text('B'),
),
DataColumn(
label: Text('C'),
),
DataColumn(
label: Text('D'),
),
DataColumn(
label: Text('E'),
),
DataColumn(
label: Text('F'),
),
DataColumn(
label: Text('G'),
),
DataColumn(
label: Text('H'),
),
],
rows: <DataRow>[
DataRow(cells: [
DataCell(Text('1 Boston')),
DataCell(Text('3')),
DataCell(Text('3')),
DataCell(Text('7')),
DataCell(Text('1')),
DataCell(Text('30')),
DataCell(Text('8')),
DataCell(Text('+2')),
DataCell(Text('-22')),
]),
DataRow(cells: [
DataCell(Text('2 London')),
DataCell(Text('3')),
DataCell(Text('4')),
DataCell(Text('12')),
DataCell(Text('44')),
DataCell(Text('7')),
DataCell(Text('44')),
DataCell(Text('-98')),
DataCell(Text('0')),
]),
DataRow(cells: [
DataCell(Text('3 Rome')),
DataCell(Text('10')),
DataCell(Text('50')),
DataCell(Text('90')),
DataCell(Text('4')),
DataCell(Text('7')),
DataCell(Text('33')),
DataCell(Text('+5')),
DataCell(Text('-61')),
]),
],
),
),
),
);
Try that:
... DataTable( horizontalMargin: 0, columnSpacing: 10, columns: [ ...
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With