Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flutter DataTable remove extra padding

Tags:

flutter

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.

enter image description here

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')),
          ]),
        ]
        )
  ),
);
like image 237
ler Avatar asked Mar 20 '19 22:03

ler


3 Answers

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

like image 63
TheMri Avatar answered Nov 15 '22 01:11

TheMri


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')),
          ]),
        ],
      ),
    ),
  ),
);
like image 12
Kevin Ho Avatar answered Nov 15 '22 00:11

Kevin Ho


Try that:

...
DataTable(
   horizontalMargin: 0,
   columnSpacing: 10,
   columns: [
...
like image 7
Denis Esin Avatar answered Nov 14 '22 23:11

Denis Esin