How to seperate table Row into 2?

Question

How to split Row into 2? I have able to make a table to list 2 column, but the bottom Row i want to split the row into 2. top = timeout time and bottom = stop time.

I have try research online but still cant figure it how to make this possible..

Any solution to make this possible ?

here is my code

Container(
margin: EdgeInsets.only(top: 10,right: 310),
child: Table(
columnWidths: {
0: FlexColumnWidth(24),
1: FlexColumnWidth(12),
2: FlexColumnWidth(12),
},
border: TableBorder.all(
color: Colors.black, style: BorderStyle.solid, width: 2),
children: [
TableRow(
children: [
Container(
padding: EdgeInsets.only(top: 14,left: 4),
height: 50,
color: Colors.cyan,
child: Column(children: [
Text(
'Layer No',
style: TextStyle(fontSize: 20),
)
]),
),
Container(
height: 50,
color: Colors.white,
child: Container(
padding: EdgeInsets.only(top: 15),
color: Colors.white,
child: Column(children: [
Text(
'1',
style: TextStyle(fontSize: 20),
)
]),
),
),
Container(
height: 50,
color: Colors.white,
child: Container(
padding: EdgeInsets.only(top: 15),
color: Colors.white,
child: Column(children: [
Text(
'2',
style: TextStyle(fontSize: 20),
)
]),
),
),
Container(
height: 50,
color: Colors.white,
child: Container(
padding: EdgeInsets.only(top: 15),
color: Colors.white,
child: Column(children: [
Text(
'3',
style: TextStyle(fontSize: 20),
)
]),
),
),


],
),
TableRow(
children: [
Container(
padding: EdgeInsets.only(top: 15),
height: 50,
color: Colors.cyan,
child: Column(children: [
Text(
'Capacity',
style: TextStyle(fontSize: 20),
)
]),
),
TableCell(
verticalAlignment: TableCellVerticalAlignment.fill,
child: Container(
padding: EdgeInsets.only(top: 1,left: 4 ),
color: Colors.white,
child: Column(children: [
TextField(
inputFormatters: [FilteringTextInputFormatter.allow(RegExp(r'^\d*\.?\d{0,2}$'))],
controller: wholelayerController1,
focusNode: _wholelayerfocusNode1,
decoration:
InputDecoration(border: InputBorder.none),
style: TextStyle(fontSize: 18,),
),
]),
),
),
Container(
padding: EdgeInsets.only(top: 1,left: 6 ),
color: Colors.white,
child: Column(children: [
TextField(
inputFormatters: [FilteringTextInputFormatter.allow(RegExp(r'^\d*\.?\d{0,2}$'))],
controller: wholelayerController2,
focusNode: _wholelayerfocusNode2,
decoration:
InputDecoration(border: InputBorder.none),
style: TextStyle(fontSize: 18,),
),
]),
),
Container(
padding: EdgeInsets.only(top: 1,left: 4 ),
color: Colors.white,
child: Column(children: [
TextField(
inputFormatters: [FilteringTextInputFormatter.allow(RegExp(r'^\d*\.?\d{0,2}$'))],
controller: wholelayerController3,
focusNode: _wholelayerfocusNode3,
decoration:
InputDecoration(border: InputBorder.none),
style: TextStyle(fontSize: 18,),
),
]),
),

],
),
],
),
),

my output

i want to make it like below photo, Any solution to make this possible ?

Answer 1

I don't have an elegant solution for you , on thing that you can do is add another entire container(in your given case code) when you know your column overflows.

Column(children:[
for(int i=0;i<(l=column_length 6);i=i+4) Container()->your widget
])

Obviously you will have to modify you container code to handle appropriate width and data but this the general gist of it