Why does the Gridview.builder overflow? (Flutter/Dart) - flutter

Question

I have been trying to fix this bug without success. I am trying to make a Gridview.builder widget that will hold the buttons for a calculator. I want the widget to fit on the lower part of the screen without overflowing. I tried to fix it by wrapping a Gridview into a Contianer or a ConstrainedBox with a certain height and width. However, the Gridview still keeps overflowing.
Here is my code for the Gridview:
Expanded(
child: ConstrainedBox(
constraints: BoxConstraints(
minHeight: ScreenHeight(context) * .3,
maxHeight: ScreenHeight(context) * .4,
),
child: Container(
margin: EdgeInsets.only(
right: ScreenHeight(context) * .02,
left: ScreenHeight(context) * .02),
child: GridView.builder(
physics: NeverScrollableScrollPhysics(),
itemCount: buttons.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: getCrossAxisCount(context)),
itemBuilder: (BuildContext context, int index) {
// Clear Button
if (index == 0) {
return CalcButton(
onTap: () {
setState(() {
userInput = '';
calcAnswer = '';
});
},
buttonText: buttons[index],
color: Colors.blue[50],
textColor: Colors.black,
);
}
// +/- button
else if (index == 1) {
return CalcButton(
buttonText: buttons[index],
color: Colors.blue[50],
textColor: Colors.black,
);
}
// % Button
else if (index == 2) {
return CalcButton(
onTap: () {
setState(() {
userInput += buttons[index];
});
},
buttonText: buttons[index],
color: Colors.blue[50],
textColor: Colors.black,
);
}
// Delete Button
else if (index == 3) {
return CalcButton(
onTap: () {
setState(() {
userInput = userInput.substring(
0, userInput.length - 1);
});
},
buttonText: buttons[index],
color: Colors.blue[50],
textColor: Colors.black,
);
}
// Equal_to Button
else if (index == 18) {
return CalcButton(
onTap: () {
setState(() {
equalPressed();
});
},
buttonText: buttons[index],
color: Colors.orange[700],
textColor: Colors.white,
);
}
// other buttons
else {
return CalcButton(
onTap: () {
setState(() {
userInput += buttons[index];
});
},
buttonText: buttons[index],
color: isOperator(buttons[index])
? Colors.blueAccent
: Colors.white,
textColor: isOperator(buttons[index])
? Colors.white
: Colors.black,
);
}
},
),
),
),
),
Here is my code for CalcButton:
class CalcButton extends StatelessWidget {
final color;
final textColor;
final String buttonText;
final onTap;
CalcButton({
this.color,
this.textColor,
this.buttonText = "",
this.onTap,
});
#override
Widget build(BuildContext context) {
return GestureDetector(
onTap: onTap,
child: Padding(
padding: EdgeInsets.all(.3),
child: ClipRRect(
child: Container(
color: getCalcButtonColor(calcTheme,
buttonText), //gets calc button color from created method
child: Center(
child: Text(
buttonText,
style: TextStyle(
color: getButtonTxtColor(calcTheme,
buttonText), //gets button txt color from created method
fontSize: ScreenWidth(context) * .05,
fontWeight: FontWeight.bold,
),
),
),
),
),
),
);
}
}
Here is how it looks:
Image 1
Image 2
Note that the ScreenHeight() and ScreenWidth() functions are functions that return the value of MediaQuery.of(context).size.width and MediaQuery.of(context).size.height
I have also tried to remove Expanded() and only use a ConstrainedBox, but the same thing still happens.
Any help will be much appreciated.