I just looking for a widget type where it provides a simple default solution to draw shared border lines between children widgets, instead of touching two different borders or turning a widget into a border. Basically it's just a table thing with the children as it's cell widgets.

There's Table in Flutter. But sadly seems like the cells is unspannable. No "colspan" thing for it's TableCell. If I put TableRows with different numbers of TableCells, I get error

Table contains irregular row lengths. Every TableRow in a Table must have the same number of children, so that every cell is filled. Otherwise, the table will contain holes.

I used to do it with Java.

<TableLayout ...>
     <TableRow ...>
          <... android:layout_span .../>
     </TableRow>
</TableLayout>

I just want to do it again with Flutter. That's all.

CodePudding user response：

ListView.separated might be what you are looking for

It takes the following arguments

• itemBuilder for the content of your rows
• separatorBuilder for creating a dynamic separator between your cells. You could use the Divider widget for that purpose.

CodePudding user response：

Solved by simply put inner table inside outer table's cell.

Table(
  children : [
    TableRow( //This row will contains virtually spanned cell
      children: [
        TableCell(...),
      ],
    ),
    TableRow( //This row will contains indirectly unspanned cells
      children: [
        TableCell(
          child : Table(...),
        ),
      ],
    )
  ]
);

And then remove outer borders for inner table leaving only inner borders.

TableBorder(
    horizontalInside : BorderSide(
      color : Colors.grey,
    ),
    verticalInside : BorderSide(
      color : Colors.grey,
    ),
)

I don't know whether it's a workaround or just how Flutter deal with it because I got the answer from Flutter's github