A RenderFlex overflowed by 230 pixels on the bottom - flutter

Question

I keep getting this error and I know how to fix it I've tried wrapping my column inside an Expanded and a Flexible widget but it doesn't seem to be working.
Here's my code :
return Scaffold(
body: Column(
children: [
//To Show Current Date
Container(
height: 30,
margin: EdgeInsets.only(left: 10),
alignment: Alignment.centerLeft,
),
SizedBox(height: 10),
//To show Calendar Widget
Expanded(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Expanded(
flex : 2,
child: SingleChildScrollView(
child: Center(
child: Card(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
const ListTile(
title: Text(
'MISSIONS',
style: TextStyle(
fontStyle: FontStyle.italic,
fontSize: 20),
textAlign: TextAlign.center,
),
),
],
),
),
),
),
),
Expanded(
flex : 8,
child: SizedBox(
height: 600.0,
child: ListView.builder(
itemCount:
3,
itemBuilder: (BuildContext context, int index) {
// box.put('missionName', missionName);
//box.put("entries",entries);
//var name = box.get('missionName');
//print('Name: $name');
return GestureDetector(
child: Card(
child: Center(
child: Container(
height: 110,
child: Row(
children: <Widget>[
Expanded(
child: Text(
'mission'),
),
SizedBox(height: 30),
Expanded(
child: GestureDetector(
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
children: <Widget>[
// Just a top space
// main content
Container(
child: Stack(
children: <Widget>[
// Box and icons
Stack(
children: <Widget>[
// Box
renderBox(),
// Icons
renderIcons(),
],
alignment: Alignment.bottomCenter,
),
// Button like
renderBtnLike(),
// Icons when jump
// Icon like
whichIconUserChoose == 1 && !isDragging
? Container(
child: Transform.scale(
child: Image.asset(
"images/close.png",
width: 20.0,
height: 20.0,
),
scale: this.zoomIconWhenRelease.value,
),
margin: EdgeInsets.only(
top: processTopPosition(this.moveUpIconWhenRelease.value),
left: this.moveLeftIconLikeWhenRelease.value,
),
)
: Container(),
// Icon love
whichIconUserChoose == 2 && !isDragging
? Container(
child: Transform.scale(
child: Image.asset(
"images/nowork.png",
width: 20.0,
height: 20.0,
),
scale: this.zoomIconWhenRelease.value,
),
margin: EdgeInsets.only(
top: processTopPosition(this.moveUpIconWhenRelease.value),
left: this.moveLeftIconLoveWhenRelease.value,
),
)
: Container(),
// Icon haha
whichIconUserChoose == 3 && !isDragging
? Container(
child: Transform.scale(
child: Image.asset(
"images/sunny.png",
width: 20.0,
height: 20.0,
),
scale: this.zoomIconWhenRelease.value,
),
margin: EdgeInsets.only(
top: processTopPosition(this.moveUpIconWhenRelease.value),
left: this.moveLeftIconHahaWhenRelease.value,
),
)
: Container(),
],
),
margin: EdgeInsets.only(left: 20.0, right: 20.0),
// Area of the content can drag
// decoration: BoxDecoration(border: Border.all(color: Colors.grey)),
width: double.infinity,
),
],
),
),
onHorizontalDragEnd: onHorizontalDragEndBoxIcon,
onHorizontalDragUpdate: onHorizontalDragUpdateBoxIcon,
),
)
],
),
),
),
),
);
}),
),
),
SizedBox(height: 30),
],
)),
],
),
);
This is the renderBtnLike() widget :
Widget renderBtnLike() {
return Container(
child: GestureDetector(
onTapDown: onTapDownBtn,
onTapUp: onTapUpBtn,
onTap: onTapBtn,
child: Container(
child: Row(
children: <Widget>[
// Icon like
Expanded(
child: Transform.scale(
child: Transform.rotate(
child: Image.asset(
getImageIconBtn(),
width: 10.0,
height: 10.0,
fit: BoxFit.contain,
color: getTintColorIconBtn(),
),
angle:
!isLongPress ? handleOutputRangeTiltIconLike(tiltIconLikeInBtn2.value) : tiltIconLikeInBtn.value,
),
scale:
!isLongPress ? handleOutputRangeZoomInIconLike(zoomIconLikeInBtn2.value) : zoomIconLikeInBtn.value,
),
),
// Text like
Expanded(
child: Transform.scale(
child: Text(
getTextBtn(),
style: TextStyle(
color: getColorTextBtn(),
fontSize: 8.0,
fontWeight: FontWeight.bold,
),
),
scale:
!isLongPress ? handleOutputRangeZoomInIconLike(zoomIconLikeInBtn2.value) : zoomTextLikeInBtn.value,
),
),
],
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
),
padding: EdgeInsets.all(8.0),
color: Colors.transparent,
),
),
width: 100.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(4.0),
color: Colors.white,
border: Border.all(color: getColorBorderBtn()),
),
margin: EdgeInsets.all(20.0),
);
}
If anyone seems to know the answer please tell me how to fix this and thank you in advance.

Answer 1

you just need to wrap your Column widget into SingleChildScrollView widget to get rid of and Expanded and Flexible widgets works inside Column or Row
return Scaffold(
body: SingleChildScrollView(
child : Column(
children: [
//To Show Current Date
Container(
height: 30,
margin: EdgeInsets.only(left: 10),
alignment: Alignment.centerLeft,
),
SizedBox(height: 10),
//To show Calendar Widget
Expanded(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Expanded(
flex : 2,
child: SingleChildScrollView(
child: Center(
child: Card(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
const ListTile(
title: Text(
'MISSIONS',
style: TextStyle(
fontStyle: FontStyle.italic,
fontSize: 20),
textAlign: TextAlign.center,
),
),
],
),
),
),
),
),
Expanded(
flex : 8,
child: SizedBox(
height: 600.0,
child: ListView.builder(
itemCount:
3,
itemBuilder: (BuildContext context, int index) {
// box.put('missionName', missionName);
//box.put("entries",entries);
//var name = box.get('missionName');
//print('Name: $name');
return GestureDetector(
child: Card(
child: Center(
child: Container(
height: 110,
child: Row(
children: <Widget>[
Expanded(
child: Text(
'mission'),
),
SizedBox(height: 30),
Expanded(
child: GestureDetector(
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
children: <Widget>[
// Just a top space
// main content
Container(
child: Stack(
children: <Widget>[
// Box and icons
Stack(
children: <Widget>[
// Box
renderBox(),
// Icons
renderIcons(),
],
alignment: Alignment.bottomCenter,
),
// Button like
renderBtnLike(),
// Icons when jump
// Icon like
whichIconUserChoose == 1 && !isDragging
? Container(
child: Transform.scale(
child: Image.asset(
"images/close.png",
width: 20.0,
height: 20.0,
),
scale: this.zoomIconWhenRelease.value,
),
margin: EdgeInsets.only(
top: processTopPosition(this.moveUpIconWhenRelease.value),
left: this.moveLeftIconLikeWhenRelease.value,
),
)
: Container(),
// Icon love
whichIconUserChoose == 2 && !isDragging
? Container(
child: Transform.scale(
child: Image.asset(
"images/nowork.png",
width: 20.0,
height: 20.0,
),
scale: this.zoomIconWhenRelease.value,
),
margin: EdgeInsets.only(
top: processTopPosition(this.moveUpIconWhenRelease.value),
left: this.moveLeftIconLoveWhenRelease.value,
),
)
: Container(),
// Icon haha
whichIconUserChoose == 3 && !isDragging
? Container(
child: Transform.scale(
child: Image.asset(
"images/sunny.png",
width: 20.0,
height: 20.0,
),
scale: this.zoomIconWhenRelease.value,
),
margin: EdgeInsets.only(
top: processTopPosition(this.moveUpIconWhenRelease.value),
left: this.moveLeftIconHahaWhenRelease.value,
),
)
: Container(),
],
),
margin: EdgeInsets.only(left: 20.0, right: 20.0),
// Area of the content can drag
// decoration: BoxDecoration(border: Border.all(color: Colors.grey)),
width: double.infinity,
),
],
),
),
onHorizontalDragEnd: onHorizontalDragEndBoxIcon,
onHorizontalDragUpdate: onHorizontalDragUpdateBoxIcon,
),
)
],
),
),
),
),
);
}),
),
),
SizedBox(height: 30),
],
)),
],
),
),
);

Answer 2

return Scaffold(
body: singlechildscrollview(
child:Column(
children: [
//To Show Current Date
Container(
height: 30,
margin: EdgeInsets.only(left: 10),
alignment: Alignment.centerLeft,
),
SizedBox(height: 10),
//To show Calendar Widget
Expanded(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Expanded(
flex : 2,
child: SingleChildScrollView(
child: Center(
child: Card(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
const ListTile(
title: Text(
'MISSIONS',
style: TextStyle(
fontStyle: FontStyle.italic,
fontSize: 20),
textAlign: TextAlign.center,
),
),
],
),
),
),
),
),
Expanded(
flex : 8,
child: SizedBox(
height: 600.0,
child: ListView.builder(
itemCount:
3,
itemBuilder: (BuildContext context, int index) {
// box.put('missionName', missionName);
//box.put("entries",entries);
//var name = box.get('missionName');
//print('Name: $name');
return GestureDetector(
child: Card(
child: Center(
child: Container(
height: 110,
child: Row(
children: <Widget>[
Expanded(
child: Text(
'mission'),
),
SizedBox(height: 30),
Expanded(
child: GestureDetector(
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
children: <Widget>[
// Just a top space
// main content
Container(
child: Stack(
children: <Widget>[
// Box and icons
Stack(
children: <Widget>[
// Box
renderBox(),
// Icons
renderIcons(),
],
alignment: Alignment.bottomCenter,
),
// Button like
renderBtnLike(),
// Icons when jump
// Icon like
whichIconUserChoose == 1 && !isDragging
? Container(
child: Transform.scale(
child: Image.asset(
"images/close.png",
width: 20.0,
height: 20.0,
),
scale: this.zoomIconWhenRelease.value,
),
margin: EdgeInsets.only(
top: processTopPosition(this.moveUpIconWhenRelease.value),
left: this.moveLeftIconLikeWhenRelease.value,
),
)
: Container(),
// Icon love
whichIconUserChoose == 2 && !isDragging
? Container(
child: Transform.scale(
child: Image.asset(
"images/nowork.png",
width: 20.0,
height: 20.0,
),
scale: this.zoomIconWhenRelease.value,
),
margin: EdgeInsets.only(
top: processTopPosition(this.moveUpIconWhenRelease.value),
left: this.moveLeftIconLoveWhenRelease.value,
),
)
: Container(),
// Icon haha
whichIconUserChoose == 3 && !isDragging
? Container(
child: Transform.scale(
child: Image.asset(
"images/sunny.png",
width: 20.0,
height: 20.0,
),
scale: this.zoomIconWhenRelease.value,
),
margin: EdgeInsets.only(
top: processTopPosition(this.moveUpIconWhenRelease.value),
left: this.moveLeftIconHahaWhenRelease.value,
),
)
: Container(),
],
),
margin: EdgeInsets.only(left: 20.0, right: 20.0),
// Area of the content can drag
// decoration: BoxDecoration(border: Border.all(color: Colors.grey)),
width: double.infinity,
),
],
),
),
onHorizontalDragEnd: onHorizontalDragEndBoxIcon,
onHorizontalDragUpdate: onHorizontalDragUpdateBoxIcon,
),
)
],
),
),
),
),
);
}),
),
),
SizedBox(height: 30),
],
)),
],
),
);
);