Expand DataTable to fill height in Flutter

Question

I have a problem with flutter. I need to fill a DataTable in the height of screen.

I tried to add the dataTable inside a Flex widget, but I don't get changes.

When I set the heigh of the Container, that's work let me a white space at the button of the screen

Thank you! and i'm sorry for mi poor english

This my code:

products.addAll(Product.getExampleList());

var table =

Container(
  child: SingleChildScrollView(
        scrollDirection: Axis.horizontal,
        child:SizedBox(
            child:
            Column(
              children: <Widget>[
                DataTable(
                    columns: <DataColumn>[
                      DataColumn(
                          label: Text("Código")
                      ),
                      DataColumn(
                        label: Text("Precio"),
                        numeric: true,
                      ),
                      DataColumn(
                          label: Text("Grupo")
                      ),
                      DataColumn(
                          label: Text("Descripción")
                      ),
                    ],
                    rows:
                    products.map<DataRow>((Product element) {
                      return DataRow(
                        key: Key(element.idProduct.toString()),
                        cells: <DataCell>[
                          DataCell(Text(element.code)),
                          DataCell(Text("\$ " + element.price.toStringAsFixed(2))),
                          DataCell(Text(element.group)),
                          DataCell(Text(element.description))
                        ],
                      );
                    }).toList()
                ),
              ],
            )
        ),
      ),
);


return  Container(
    color: Colors.white24,
    child:
      Column(
      children: <Widget>[
        Container(
          padding: EdgeInsets.all(10),
          child: Row(

            children: <Widget>[

              Text("Código: "),
              Flexible(
                child: TextField(
                  controller: tController,
                  decoration: InputDecoration(
                      hintText: "Ingrese Código"
                  ) ,
                ),
              ),
              RaisedButton(
                onPressed: onPressedSearch,
                child: Text("Buscar"),
              )
            ],
          ),
        ),
        Flex(
          direction: Axis.vertical,
          children: <Widget>[
            table
          ],
        ),
      ],
    )
);

Have you used Wrap content? – DomingoMG Jan 26 '20 at 18:38 — DomingoMG, Jan 26 '20 at 18:38

score 15 · Accepted Answer · edited Feb 26 '22 at 03:52

15

You can set the dataRowHeight and headingRowHeight properties of the DataTable to make its height equal to screen height.

your_number_of_rows = 4;
rowHeight = (MediaQuery.of(context).size.height - 56) / your_number_of_rows;

DataTable(dataRowHeight: rowHeight, headingRowHeight: 56.0, columns: ...)

edited Feb 26 '22 at 03:52

Philippe Fanaro

6,148
6
38
76

answered Jan 26 '20 at 22:23

Mutlu Simsek

1,088
14
22

Sorry, but why -56? – hunterlan Feb 01 '23 at 14:25
I don't remember. Maybe it is the default value. You can change it to any value. It is used two times in the code snippet above. @hunterlan – Mutlu Simsek Feb 01 '23 at 15:49

score 1 · Answer 2 · edited Jul 07 '23 at 00:03

1

In accord with the official documentation, the parameter dataRowHeight is deprecated, as shown below.

dataRowHeight is deprecated and shouldn't be used. Migrate to use dataRowMinHeight and dataRowMaxHeight instead. This feature was deprecated after v3.7.0-5.0.pre.

So you should use

DataTable(          
         dataRowMinHeight: 25.0,
         dataRowMaxHeight: 28.0,
...

edited Jul 07 '23 at 00:03

nullromo

2,165
2
18
39

answered Jun 20 '23 at 18:09

Neemias Fonseca Neto

11
5

Hello, Neemias! I saw that you are a new contributor. Welcome to the community. Writing here in portuguese is not allowed and could result in answer exclusion or downvotes. Don't worry, i just translated your post and everything is ok now. You will soon get a hold in the community standards. You should write posts here only in english. We have another community (https://pt.stackoverflow.com/) if you want to contribute in portuguese. Bem vindo! – luizv Jun 25 '23 at 20:57
hi, thank you for me alert in relation a this. but i hope e help in english same, for up to train my write in english, because I suck. – Neemias Fonseca Neto Jun 27 '23 at 00:56
It's just practice. If you want to contribute to the english forum, you can always write a draft in portuguese and then translate it to english, with the help of some translation tool. – luizv Jun 27 '23 at 01:02

score 0 · Answer 3 · answered Aug 28 '23 at 07:42

By setting the dataRowMaxHeight: double.infinity will help you..

          DataTable(
          sortAscending: true,
          columnSpacing: 2.0,
          dataRowMaxHeight: double.infinity,       // Code to be changed.
          dataRowMinHeight: 60,                    // Set the min required height.
          dividerThickness: 1,
          columns: <DataColumn>[
            DataColumn(
                label: Expanded(
              child: Container(
                width: 100,
                child: Text(
                  'Account Type',
                  textAlign: TextAlign.center
                ),
              ),
            ))]),

Expand DataTable to fill height in Flutter

3 Answers3

Linked