Flutter cannot fix the overflowed issue of a component - flutter

Question

This the issue I have, but I want to keep the text
I dont want to change the layout of the widget, I need to know is the a way to change the height of the widget
widget class that have the issue
class CategoryView extends StatelessWidget {
const CategoryView(
{Key key,
this.category,
this.animationController,
this.animation,
this.callback})
: super(key: key);
final void Function(int id) callback;
final Category category;
final AnimationController animationController;
final Animation<dynamic> animation;
#override
Widget build(BuildContext context) {
return AnimatedBuilder(
animation: animationController,
builder: (BuildContext context, Widget child) {
return FadeTransition(
opacity: animation,
child: Transform(
transform: Matrix4.translationValues(
0.0, 50 * (1.0 - animation.value), 0.0),
child: InkWell(
splashColor: Colors.transparent,
onTap: () {
callback(category.id);
},
child: SizedBox(
child: Stack(
alignment: AlignmentDirectional.bottomCenter,
children: <Widget>[
Container(
child: Column(
children: <Widget>[
Expanded(
child: Container(
decoration: BoxDecoration(
color: HexColor('#f7f7f7'),
borderRadius: const BorderRadius.all(
Radius.circular(16.0)),
// border: new Border.all(
// color: BlogSiteAppTheme.notWhite),
),
child: Column(
children: <Widget>[
Expanded(
child: Container(
height: 280,
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(
top: 16, left: 16, right: 16),
child: Text(
category.title,
textAlign: TextAlign.left,
style: TextStyle(
fontWeight: FontWeight.w600,
fontSize: 16,
letterSpacing: 0.27,
color:
BlogSiteAppTheme.darkerText,
),
),
),
Padding(
padding: const EdgeInsets.only(
top: 8,
left: 16,
right: 16,
bottom: 4),
child: Row(
mainAxisAlignment:
MainAxisAlignment
.spaceBetween,
crossAxisAlignment:
CrossAxisAlignment.center,
children: <Widget>[
Text(
'${category.date.substring(0, 10)}',
textAlign: TextAlign.left,
style: TextStyle(
fontWeight: FontWeight.w200,
fontSize: 12,
letterSpacing: 0.27,
color:
BlogSiteAppTheme.grey,
),
),
Container(
child: Row(
children: <Widget>[
Text(
'${category.excelentCount}',
textAlign:
TextAlign.left,
style: TextStyle(
fontWeight:
FontWeight.w200,
fontSize: 18,
letterSpacing: 0.27,
color:
BlogSiteAppTheme
.grey,
),
),
Icon(
Icons.star,
color: BlogSiteAppTheme
.brightBlue,
size: 20,
),
],
),
)
],
),
),
Padding(
padding: const EdgeInsets.only(
top: 8,
left: 16,
right: 16,
bottom: 10),
child: Row(
mainAxisAlignment:
MainAxisAlignment
.spaceBetween,
crossAxisAlignment:
CrossAxisAlignment.center,
children: <Widget>[
Text(
'${category.addedBy}',
textAlign: TextAlign.left,
style: TextStyle(
fontWeight: FontWeight.w600,
fontSize: 18,
letterSpacing: 0.27,
color: BlogSiteAppTheme
.nearlyBlue,
),
),
Container(
child: Row(
children: <Widget>[
Text(
'${category.goodCount}',
textAlign:
TextAlign.left,
style: TextStyle(
fontWeight:
FontWeight.w200,
fontSize: 18,
letterSpacing: 0.27,
color:
BlogSiteAppTheme
.grey,
),
),
Icon(
Icons.star,
color: BlogSiteAppTheme
.nearlyBlue,
size: 20,
),
],
),
)
],
),
),
],
),
),
),
const SizedBox(
width: 48,
),
],
),
),
),
const SizedBox(
height: 48,
),
],
),
),
Container(
child: Padding(
padding:
const EdgeInsets.only(top: 24, right: 16, left: 16),
child: Container(
decoration: BoxDecoration(
borderRadius:
const BorderRadius.all(Radius.circular(16.0)),
boxShadow: <BoxShadow>[
BoxShadow(
color: BlogSiteAppTheme.grey.withOpacity(0.2),
offset: const Offset(0.0, 0.0),
blurRadius: 6.0),
],
),
child: ClipRRect(
borderRadius:
const BorderRadius.all(Radius.circular(16.0)),
child: AspectRatio(
aspectRatio: 1.28,
child: Image.asset(category.imagePath)),
),
),
),
),
],
),
),
),
),
);
},
);
}
}
Featured blog posts Container part
Padding(
padding: const EdgeInsets.only(top: 8),
child: FutureBuilder<bool>(
future: getData(),
builder: (BuildContext context, AsyncSnapshot<bool> snapshot) {
if (!snapshot.hasData) {
return const SizedBox();
} else {
return GridView(
padding: const EdgeInsets.all(8),
physics: const BouncingScrollPhysics(),
scrollDirection: Axis.vertical,
children: List<Widget>.generate(
posts.length,
(int index) {
final int count = posts.length;
final Animation<double> animation =
Tween<double>(begin: 0.0, end: 1.0).animate(
CurvedAnimation(
parent: animationController,
curve: Interval((1 / count) * index, 1.0,
curve: Curves.fastOutSlowIn),
),
);
animationController.forward();
return CategoryView(
callback: (int id) {
widget.callBack(id);
},
category: posts[index],
animation: animation,
animationController: animationController,
);
},
),
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
mainAxisSpacing: 32.0,
crossAxisSpacing: 32.0,
childAspectRatio: 0.8,
),
);
}
},
),
);
Does anyone have a way to fixed this.
I need to keep the text as it gets, so I need a way to expand the widget when it need to expand

Answer 1

GridView must have a childAspectRatio property, try to play around with that and see if you have the wanted result

Answer 2

try wrapping your stack with Expanded with flex:1