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
– DomingoMG

2020-01-26 18:38:32 +00:00
Commented Jan 26, 2020 at 18:38 — DomingoMG
– DomingoMG, Commented Jan 26, 2020 at 18:38

psygo · Accepted Answer · 2022-02-26 03:52:30Z

16

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, 2022 at 3:52

psygo

7,8538 gold badges63 silver badges112 bronze badges

answered Jan 26, 2020 at 22:23

Mutlu Simsek

1,18216 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

hunterlan Over a year ago

Sorry, but why -56?

Mutlu Simsek Over a year ago

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

Trendy · Accepted Answer · 2023-08-28 07:42:50Z

4

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
                ),
              ),
            ))]),

answered Aug 28, 2023 at 7:42

Trendy

2972 silver badges9 bronze badges

1 Comment

Bonfra Over a year ago

Exactly what i as looking for :)

nullromo · Accepted Answer · 2023-07-07 00:03:10Z

2

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 7, 2023 at 0:03

nullromo

2,7374 gold badges25 silver badges55 bronze badges

answered Jun 20, 2023 at 18:09

Neemias Fonseca Neto

215 bronze badges

3 Comments

luizv Over a year ago

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 (pt.stackoverflow.com) if you want to contribute in portuguese. Bem vindo!

Neemias Fonseca Neto Over a year ago

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.

luizv Over a year ago

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.

Collectives™ on Stack Overflow

Expand DataTable to fill height in Flutter

3 Answers 3

2 Comments

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related