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

Varien

Have you used Wrap content? – Smacking

Answer 1

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: ...)

Thurlow

Sorry, but why -56? – Cogitable

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. @Cogitable – Thurlow

Answer 2

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

Might

Exactly what i as looking for :) – Nylons

Answer 3

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,
...

Flagstad

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! – Perimorph

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. – Flagstad

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. – Perimorph