Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Container (with column in it) doesn't adjust to the content inside flutter

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:

pic of what i get

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

What I wanted:

pic of 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:

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading