Issue
How do I resolve the exception "A RenderFlex overflowed by 23 pixels on the bottom." In my app, I created Gridview. but getting RenderFlex every single time when I run my code. I wrap Gridview with expnded add
- scrollDirection: Axis.vertical,
- shrinkWrap: true,
but no effect still getting this Exception. can anyone correct me; what I am doing wrong In my code? and what should I have to do.
Here is My code where I am getting Error:
Widget build(BuildContext context) {
return Scaffold(
body:Container(
height: 150,
width: MediaQuery.of(context).size.width,
color: Colors.grey[100],
child: Column(children: [
Expanded(
child: Padding(
padding: EdgeInsets.fromLTRB(10, 40, 0, 0),
child: Container(
child: Column(
children: [
Align(
alignment: Alignment.centerLeft,
child: Container(
child: Text('Oliver Queen'),
),
),
SizedBox(height:5),
Align(
alignment: Alignment.centerLeft,
child: Container(
child: Text('olieequeen77@gmail'),
),
),
SizedBox(height:5),
Align(
alignment: Alignment.centerLeft,
child: Container(
child: Text('9874561239'),
),
),
],
),
),
),
),
Expanded(
child: GridView(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
scrollDirection: Axis.vertical,
shrinkWrap: true,
children: <Widget>[
Container(
color: Colors.grey[100],
height: 90.0,
width: 110.0,
child: TextButton(onPressed: (){
},
child: Column(children: [
Icon(Icons.home,size: 45,
color: Colors.purple,),
Text("My Settings",
style: TextStyle(fontSize: 12,color: Colors.black)),
],),
),
),
Container(
color: Colors.grey[100],
height: 90.0,
width: 110.0,
child: TextButton(onPressed: (){
},
child: Column(children: [
Icon(Icons.home,size: 45,
color: Colors.purple,),
Text("My Settings",
style: TextStyle(fontSize: 12,color: Colors.black)),
],),
),
),
Container(
color: Colors.grey[100],
height: 90.0,
width: 110.0,
child: TextButton(onPressed: (){
},
child: Column(children: [
Icon(Icons.home,size: 45,
color: Colors.purple,),
Text("My Settings",
style: TextStyle(fontSize: 12,color: Colors.black)),
],),
),
),
Container(
color: Colors.grey[100],
height: 90.0,
width: 110.0,
child: TextButton(onPressed: (){
},
child: Column(children: [
Icon(Icons.home,size: 45,
color: Colors.purple,),
Text("My Settings",
style: TextStyle(fontSize: 12,color: Colors.black)),
],),
),
),
Container(
color: Colors.grey[100],
height: 90.0,
width: 110.0,
child: TextButton(onPressed: (){
},
child: Column(children: [
Icon(Icons.home,size: 45,
color: Colors.purple,),
Text("My Settings",
style: TextStyle(fontSize: 12,color: Colors.black)),
],),
),
),
],
),
)
],
),
),
);
}
}
Solution
try to change Container height to 200
return Scaffold(
body: Container(
height: 200,
width: MediaQuery.of(context).size.width,
color: Colors.grey[100],
child: Column(
children: [
Expanded(
child: Padding(
padding: EdgeInsets.fromLTRB(10, 40, 0, 0),
child: Container(
child: Column(
children: [
Align(
alignment: Alignment.centerLeft,
child: Container(
child: Text('Oliver Queen'),
),
),
SizedBox(height: 5),
Align(
alignment: Alignment.centerLeft,
child: Container(
child: Text('olieequeen77@gmail'),
),
),
SizedBox(height: 5),
Align(
alignment: Alignment.centerLeft,
child: Container(
child: Text('9874561239'),
),
),
],
),
),
),
),
Expanded(
child: GridView(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2),
scrollDirection: Axis.vertical,
shrinkWrap: true,
children: <Widget>[
Container(
color: Colors.grey[100],
height: 90.0,
width: 110.0,
child: TextButton(
onPressed: () {},
child: Column(
children: [
Icon(
Icons.home,
size: 45,
color: Colors.purple,
),
Text("My Settings",
style:
TextStyle(fontSize: 12, color: Colors.black)),
],
),
),
),
Container(
color: Colors.grey[100],
height: 90.0,
width: 110.0,
child: TextButton(
onPressed: () {},
child: Column(
children: [
Icon(
Icons.home,
size: 45,
color: Colors.purple,
),
Text("My Settings",
style:
TextStyle(fontSize: 12, color: Colors.black)),
],
),
),
),
Container(
color: Colors.grey[100],
height: 90.0,
width: 110.0,
child: TextButton(
onPressed: () {},
child: Column(
children: [
Icon(
Icons.home,
size: 45,
color: Colors.purple,
),
Text("My Settings",
style:
TextStyle(fontSize: 12, color: Colors.black)),
],
),
),
),
Container(
color: Colors.grey[100],
height: 90.0,
width: 110.0,
child: TextButton(
onPressed: () {},
child: Column(
children: [
Icon(
Icons.home,
size: 45,
color: Colors.purple,
),
Text("My Settings",
style:
TextStyle(fontSize: 12, color: Colors.black)),
],
),
),
),
Container(
color: Colors.grey[100],
height: 90.0,
width: 110.0,
child: TextButton(
onPressed: () {},
child: Column(
children: [
Icon(
Icons.home,
size: 45,
color: Colors.purple,
),
Text("My Settings",
style:
TextStyle(fontSize: 12, color: Colors.black)),
],
),
),
),
],
),
)
],
),
),
);
}
Answered By – GJJ2019
Answer Checked By – David Goodson (FlutterFixes Volunteer)