Complex Table Layout

I want to create a table that shows nutrition facts in an app.
There are different standard nutrition tables layouts (e.g. in US, EU, like shown in the image below) that require specific data order and styling.

Hence, I have a couple of requirements, e.g.

  • arrange (static) data in rows and columns

  • have horizontal lines with different widths

  • optionally have vertically lines between columns

  • text can span multiple rows

  • text can have different font sizes

  • rows may have different heights

  • rows may have child rows with indent and no horizontal line between them

  • rows may span multiple columns

  • rows/cells may have different horizontal alignment

I saw that Flutter has Table, TableRow, TableColumn and Border class which seems to provide the necessary layout and styling flexibility to build something like this.

But the question is, what is the best way to build such a table in FlutterFlow?

2
2 replies