Create Grid/Table of Aligned Text in Flutter

Question

G'day!

I'd like to make the following very simple table in Flutter. Basically two columns of text, left column is right-aligned, right column left-aligned. Each row top-aligned in case the right column has multiple names.

The left column should auto-size to the size of the largest item (since will have translation strings for each title), leaving the rest of the space for the right column names.

The black border and inner dashed borders are not necessary and only to show the alignments. The text is also just sample text.

I can create this in c# xaml in 2 minutes using a Grid with GridRow and GridColumn definitions, but seems very difficult in Flutter. I've tried using Table, DataTable and Columns/Rows, but none will align like this.

Surely this is a rather common way to display data?

Any help would be greatly appreciated!

Thanks! Damian

Answer 1

We can use Table widget to achieve the desired result.

For first column to be left-aligned and second to be right-aligned, although I didn't find any inbuilt property of Table widget that does the job for us, but we can still make use of Container widget and use padding and alignment to make them right and left aligned respectively for each TableRow, as below:

TableRow( children: [
                Column(
                  children:[
                  Container(
                    padding: EdgeInsets.all(5),
                  alignment: Alignment.centerRight,
                    child: Text('Officers:')
                  )
                ]),
                Column(children:[
                  Container(
                  padding: EdgeInsets.all(5),
                  alignment: Alignment.centerLeft,
                    child: Text('Michael')
                  )
                ]),
              ]),
              TableRow( children: [
                Column(
                  children:[
                  Container(
                    padding: EdgeInsets.all(5),
                  alignment: Alignment.centerRight,
                    child: Text('Explorers:')
                  )
                ]),
                Column(children:[
                  Container(
                  padding: EdgeInsets.all(5),
                  alignment: Alignment.centerLeft,
                    child: Text('James Smith \nFred Jones')
                  )
                ]),
              ]),

This will be rendered as:

• For each row to be top-aligned, we will use Table's defaultVerticalAlignment: TableCellVerticalAlignment.top property, so that in case of multiple values in right column, the row will be top-aligned:

• For left column to be auto-size based on data in it, we will use columnWidth property that takes key value pair as input to represent each row in the table and pass IntrinsicColumnWidth() which sizes the column according to size of its content, as below:

columnWidths: {
                  0: IntrinsicColumnWidth(),
                  1: IntrinsicColumnWidth()
                },

This renders the complete table as:

Hope this answers your question.