I got problem to handle width in this container. It become to small and overlapping on other container. Image bellow as your reference.
And refer bellow code as your reference…. ..
Container(
width: 660.0,
margin: EdgeInsets.only(top: 5),
child: Row(children: [
Column(children: [
Container(
width: 90.0,
height: 40.0,
child: Center(
child: Text(
"Serial Number",
textAlign: TextAlign.left,
style: TextStyle(color: Colors.black),
),
),
),
Container(
width: 400.0,
height: 30.0,
decoration: BoxDecoration(
color: Colors.grey[200],
borderRadius:
new BorderRadius.circular(2.0)),
child: Padding(
padding: EdgeInsets.only(
left: 15,
right: 5,
top: 2,
bottom: 2),
child: TextFormField(
// initialValue: '',
decoration: const InputDecoration(
border: InputBorder.none,
),
)),
),
]),
]),
),
Container(
width: data.size.width,
margin: EdgeInsets.only(top: 1),
child: Scrollbar(
isAlwaysShown: true,
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Column(children: [
Container(
child: Center(
child: Text('1',
style: TextStyle(
color:
Colors.white))),
height: 40,
width: 306,
decoration: BoxDecoration(
border: Border.all(
width: 1.0,
color: Colors.grey),
color: Colors.grey[600])),
Table(
defaultColumnWidth:
FixedColumnWidth(
data.size.width * 0.1),
border: TableBorder.all(
width: 1.0,
color: Colors.grey[500]),
children: [
TableRow(
children: [
"A",
"B",
"C",
"D"
]
.map((label) =>
Container(
height: 40,
color: Colors
.black,
padding: EdgeInsets
.symmetric(
vertical:
4),
child: Center(
child: Text(
label,
textAlign:
TextAlign
.center,
style: TextStyle(
color: Colors
.white),
))))
.toList()),
...this.rowList.map((row) {
return TableRow(
children: [
'valueA',
'valueB',
'valueC',
'valueD'
]
.map((label) =>
Container(
decoration: BoxDecoration(
color: Colors
.white),
padding: EdgeInsets
.symmetric(
vertical:
4),
child: TextFormField(
initialValue: row['1'][label],
onChanged: (value) {
row['1'][label] =
value;
print(
row);
print(row[
'1']);
updateDetails();
},
cursorColor: Colors.grey,
keyboardType: TextInputType.text,
decoration: new InputDecoration(
border:
InputBorder.none,
focusedBorder:
InputBorder.none,
enabledBorder:
InputBorder.none,
errorBorder:
InputBorder.none,
disabledBorder:
InputBorder.none,
isDense:
true,
contentPadding: EdgeInsets.symmetric(
horizontal:
4,
vertical:
4),
),
style: TextStyle(fontSize: data.size.width * 0.016))))
.toList());
}).toList()
]),
Container(
child: Center(
child: Text('2',
style: TextStyle(
color:
Colors.white))),
height: 40,
width: 306,
decoration: BoxDecoration(
border: Border.all(
width: 1.0,
color: Colors.grey),
color: Colors.grey[600])),
Table(
defaultColumnWidth:
FixedColumnWidth(
data.size.width * 0.1),
border: TableBorder.all(
width: 1.0,
color: Colors.grey[500]),
children: [
TableRow(
children: [
"A",
"B",
"C",
"D"
]
.map((label) =>
Container(
height: 40,
color: Colors
.black,
padding: EdgeInsets
.symmetric(
vertical:
4),
child: Center(
child: Text(
label,
textAlign:
TextAlign
.center,
style: TextStyle(
color: Colors
.white),
))))
.toList()),
...this.rowList.map((row) {
return TableRow(
children: [
'valueA',
'valueB',
'valueC',
'valueD'
]
.map((label) =>
Container(
decoration: BoxDecoration(
color: Colors
.white),
padding: EdgeInsets
.symmetric(
vertical:
4),
child: TextFormField(
initialValue: row['2'][label],
onChanged: (value) {
row['2'][label] =
value;
print(
row);
print(row[
'2']);
updateDetails();
},
cursorColor: Colors.grey,
keyboardType: TextInputType.text,
decoration: new InputDecoration(
border:
InputBorder.none,
focusedBorder:
InputBorder.none,
enabledBorder:
InputBorder.none,
errorBorder:
InputBorder.none,
disabledBorder:
InputBorder.none,
isDense:
true,
contentPadding: EdgeInsets.symmetric(
horizontal:
4,
vertical:
4),
),
style: TextStyle(fontSize: data.size.width * 0.016))))
.toList());
}).toList()
]),
])
))),
]);
Thanks in advance…
“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
@Fash I have reviewed your code as per my understanding and have wrapped the row in a SingleChildScrollView to enable horizontal scrolling. Use expanded to allow the first container to occupy the remaining vertical space. Adjust the width value as needed to avoid any overlap. I think this will help!