Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to set table column size in TableRow for Flutter Table

I have no idea how to set table column size in Flutter. If I use Row, Expanded can be used, but TableRow does not allow it.

Please tell me some advice how to set table column size. The best solution for me is adjust to size of text length in columns.

like image 566
tajihiro Avatar asked Jan 03 '20 05:01

tajihiro


People also ask

How do you adjust column width in a table flutter?

You can use defaultColumnWidth inside Table if you want to set same width to each column, Table( defaultColumnWidth: FixedColumnWidth(200.0), ... you can use a different width for each column. Table( columnWidths: { 0: FlexColumnWidth(1), 1: FlexColumnWidth(4), 2: FlexColumnWidth(4), }, ...

How do you use a TableRow in flutter?

Show activity on this post. Create the list beforehand in the build method. final rows = <TableRow>[]; for (var rowData in myRowDataList) { rows. add(TableRow( ... // Generate a TableRow using rowData )); } ... Table( columnWidths: { 0: FlexColumnWidth(1.0), 1: FlexColumnWidth(2.0), }, border: TableBorder.

How do you give padding to a table row in flutter?

What I found working in this case (when you want to add padding between rows in a table) is to wrap Text Widget with Container and add padding property to one of your elements (that is potentially the 'tallest' one) and use alignment property for other containers where you need to align text within the row.


3 Answers

Method 1

You can use defaultColumnWidth inside Table if you want to set same width to each column,

Table(
    defaultColumnWidth: FixedColumnWidth(200.0),
...

Output

enter image description here


Method 2

you can use a different width for each column.

Table(
columnWidths: {
                0: FlexColumnWidth(1),
                1: FlexColumnWidth(4),
                2: FlexColumnWidth(4),
              },     
...

Output

enter image description here

like image 184
Ravinder Kumar Avatar answered Sep 26 '22 10:09

Ravinder Kumar


For your specific case you can use

Table(
  defaultColumnWidth: IntrinsicColumnWidth(),
  ...
);

, since you want the column width to adjust to the text lengths. IntrinsicColumnWidth sizes the column based on the width of the content in each cell, ie, the column width increases or shrinks depending upon the length of the content in the cell.

like image 40
Nuqo Avatar answered Sep 23 '22 10:09

Nuqo


You can also make two column width fixed.

Table(
      border: TableBorder.all(color: Colors.black),
      columnWidths: {
            0: FixedColumnWidth(100.0),// fixed to 100 width
            1: FlexColumnWidth(),
            2: FixedColumnWidth(100.0),//fixed to 100 width
          },
like image 10
Krishnamoorthy Acharya Avatar answered Sep 23 '22 10:09

Krishnamoorthy Acharya