Flutter DataTable limit width to screen width & wrap text

Question

This is my DataTable:

SizedBox(
  height: 200,
  child: SingleChildScrollView(
    scrollDirection: Axis.vertical,
    child: DataTable(
      columnSpacing: 0,
      columns: const [
        DataColumn(label: Text("Domain")),
        DataColumn(label: Text("Request count")),
      ],
      rows: const [
        DataRow(cells: [
          DataCell(Text("A very long text which causes the right column to be pushed out of the screen")),
          DataCell(Text("12345")),
        ]),
        DataRow(cells: [
          DataCell(Text("It would be the best if this text would be shown in to lines so that there is enough space for the second column")),
          DataCell(Text("678890")),
        ]),
      ],
    ),
  ),
)

The exception is:

The following assertion was thrown during layout:
A RenderFlex overflowed by 39 pixels on the right.

The relevant error-causing widget was
DataTable

I want the table to be limited in height, so that you can scroll through it, but horizontally the width should be fixed, so that you cannot scroll. If the content does not fit into the columns, as the above error shows, then the text should not disappear from the screen, but instead the text should go into a second row so that there is enough space for both columns on the screen. I have already tried many things, but I simply cannot limit the width of the table so that it is only as wide as the parent widget.

`words be cut off,` or go to next line, I am confused with this part — Md. Yeasin Sheikh, Jan 23 '22 at 15:28
At the moment, the second column is simply cut off on the right-hand side. Instead, the text from one or both columns should go over into a second line so that both columns fit next to each other. — PlutoHDDev, Jan 23 '22 at 15:30
Can you provide simple code-snippet while it is containing extra code that reference is missing like `snapshot`? — Md. Yeasin Sheikh, Jan 23 '22 at 15:32

score 3 · Accepted Answer · answered Jan 23 '22 at 16:16

3

Providing width for every DataCell child solve the issue.

DataCell(
  SizedBox(
    width: x,
    child: Text(
      "A very long text which causes the right column to be pushed out of the screen",
      overflow: TextOverflow.visible,
      softWrap: true,
    ),
  ),
),

To get responsive width, you can use LayoutBuilder on body and use it's width: constraints.maxWidth * .5, to get 50% width of the screen or MediaQuery, (make sure minimizing the padding).

answered Jan 23 '22 at 16:16

Md. Yeasin Sheikh

54,221
7
29
56

1

I am now using the ```LayoutBuilder``` wrapped around the ```DataTable``` and tried ```width: constraints.maxWidth * .8``` and ```width: constraints.maxWidth * .2```. I don't know why it doesn't fully work out, I have to use ```(constraints.maxWidth - 50) * factor```, otherwise the right column is still cut off. Do you have an idea why that is? I have wrapped the ```LayoutBuilder``` directly around the ```DataTable``` and have set ```columnSpacing: 0``` and I am not using any paddings here. – PlutoHDDev Jan 23 '22 at 17:04
1

Could be issue decoration, it is having padding or something that is taking some space like you solved with minimizing 50px – Md. Yeasin Sheikh Jan 23 '22 at 17:09
1

I just found out that I also have to set ```horizontalMargin: 0```, then I don't need to take away 50px. – PlutoHDDev Jan 23 '22 at 17:21

CuriousJR · Answer 2 · 2023-04-05T19:56:58.830

0

Wrapping DataTable widget with FittedBox solved all!

edited Apr 05 '23 at 19:56

answered Apr 05 '23 at 19:56

CuriousJR

1
1

1

Your answer could be improved by providing an example of the solution and how it helps the OP. – Tyler2P Apr 13 '23 at 11:25

Flutter DataTable limit width to screen width & wrap text

2 Answers2