I am building the column in flutter as below code which has a nested ListView.Builder, but it is giving display error of RenderFlex, how should I resolve it?
A RenderFlex overflowed by 116 pixels on the bottom.
Column(
children: [
SizedBox(height: 25,),
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment:CrossAxisAlignment.center,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment:CrossAxisAlignment.center,
children: <Widget>[
//order container
Container(
height: 32,
width: 160,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(
width:0.5,
color: Color(0xFF766F6F),
),
borderRadius: BorderRadius.circular(10.0),
),
child: Center(
child: Text('Order Date',
style: TextStyle(backgroundColor: Colors.white,
color:Color(0xFF2e2a2a),
fontFamily: 'Roboto',
fontSize: 12,
),
),
),
),
Container(
height: 32,
width: 160,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(
width:0.5,
color: Color(0xFF766F6F),
),
borderRadius: BorderRadius.circular(10.0),
),
child: Center(
child: Text('19 May 2020'),
),
),
],),
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment:CrossAxisAlignment.center,
children: <Widget>[
Container(
height: 32,
width: 160,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(
width:0.5,
color: Color(0xFF766F6F),
),
borderRadius: BorderRadius.circular(10.0),
),
child: Center(
child: Text('Party',
style: TextStyle(backgroundColor: Colors.white,
color:Color(0xFF2e2a2a),
fontFamily: 'Roboto',
fontSize: 12,
),),
),
),
Container(
height: 32,
width: 160,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(
width:0.5,
color: Color(0xFF766F6F),
),
borderRadius: BorderRadius.circular(10.0),
),
child: Center(
child: Text('Vardhman Textiles Ltd', style: TextStyle(backgroundColor: Colors.white,
color:Color(0xFF2e2a2a),
fontFamily: 'Roboto',
fontSize: 12,
),),
),
),
],),
],),
SizedBox(height: 30,),
ListView.separated(
separatorBuilder:
(BuildContext context, int index) {
return SizedBox(
height: 16,
);
},
shrinkWrap: true,
itemCount: snapshot.data.content[key].length,
itemBuilder: (context, index) {
return Column(
children: [
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
height: 40,
width: 320,
decoration: BoxDecoration(
color: Color(0xFFFF0000),
border: Border.all(
color: Color(0xFFFF0000),
),
borderRadius: BorderRadius.circular(10.0),
),
child: Center(
child: Text('ITEM DETAILS - ' + "1/2",
style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold,
fontFamily: 'Roboto',
fontSize: 20,
),
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
// crossAxisAlignment:CrossAxisAlignment.center,
children: <Widget>[
Container(
height: 32,
width: 160,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(
width:0.5,
color: Color(0xFF766F6F),
),
borderRadius: BorderRadius.circular(10.0),
),
child: Center(
child: Text("Catalog Item", style: TextStyle(backgroundColor: Colors.white,
color:Color(0xFF2e2a2a),
fontFamily: 'Roboto',
fontSize: 12,
),
),
),
),
Container(
height: 32,
width: 160,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(
width:0.5,
color: Color(0xFF766F6F),
),
borderRadius: BorderRadius.circular(10.0),
),
child: Center(
child: Text(snapshot
.data.content[key][index][0].sodPk, style: TextStyle(backgroundColor: Colors.white,
color:Color(0xFF2e2a2a),
fontFamily: 'Roboto',
fontSize: 12,
),
),
),
),
],),
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment:CrossAxisAlignment.center,
children: <Widget>[
Container(
height: 32,
width: 160,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(
width:0.5,
color: Color(0xFF766F6F),
),
borderRadius: BorderRadius.circular(10.0),
),
child: Center(
child: Text('QTY.', style: TextStyle(backgroundColor: Colors.white,
color:Color(0xFF2e2a2a),
fontFamily: 'Roboto',
fontSize: 12,
),
),
),
),
Container(
height: 32,
width: 160,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(
width:0.5,
color: Color(0xFF766F6F),
),
borderRadius: BorderRadius.circular(10.0),
),
child: Center(
child: Text('10', style: TextStyle(backgroundColor: Colors.white,
color:Color(0xFF2e2a2a),
fontFamily: 'Roboto',
fontSize: 12,
),),
),
),
],),
],
),
],
);
},
)
],
)
Please guide me as I am new to the flutter learning, thanks, I am trying to use Stack, but no good, When I used stack the first child column was overlapped by the listview.builder, so removed it,
Please guide me the resolution
You can try wrap your ListView.separated with Expanded Widget. What expanded do is expands a child of a Row, Column, or Flex so that the child fills the available space. So it won't overflow
User contributions licensed under CC BY-SA 3.0