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