I’m trying to create something like a review card that will adapt to the amount of text inside it (change the height). However, for some reason the container that is created much larger and I don’t understand why
What I get:
What I wanted:

My code:
@override
Widget build(BuildContext context) {
String descText =
"Truly, manuscripts don't burn. Mikhail Bulgakov's works have not been published for a long time, but since the ban was lifted, they have become bestsellers!";
Size size = MediaQuery.of(context).size;
return InkWell(
onTap: press,
child: Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.black),
borderRadius: BorderRadius.all(Radius.circular(15))),
padding: const EdgeInsets.all(15),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Expanded(
child: Row(
children: <Widget>[
CircleAvatar(
radius: 27,
backgroundColor: primaryColor,
child: CircleAvatar(
backgroundImage: NetworkImage(
review.getReviewAuthor().getProfileImageUrl(),
),
maxRadius: 25,
)),
const SizedBox(width: 15),
Expanded(
child: Text(
review.getReviewAuthor().getName(),
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 16, fontWeight: FontWeight.bold),
)),
],
),
),
Row(
children: [
const Icon(
Icons.star_border_rounded,
color: primaryColor,
size: 20,
),
Text(
review.getReviewRating().toString(),
style: const TextStyle(
fontWeight: FontWeight.bold, color: primaryColor),
),
],
)
],
),
const SizedBox(height: 10),
Text(
descText,
textAlign: TextAlign.justify,
),
],
),
),
);
}
I tried to solve my problem through the stack and fix the widget positions using (Positioned), but nothing worked.
>Solution :
Add mainAxisSize: MainAxisSize.min, in your Column
return InkWell(
onTap: press,
child: Container(
...
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min // 👈 add this line
children: [...]
)
)
);
Output:
