A RenderFlex overflowed by x pixels on the right

Question

I was trying to show a list of items with the following code, I've tried to wrap this Column with Expanded but getting the same error.

class QuizDoneByStudent extends StatelessWidget {
  const QuizDoneByStudent({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    var size = MediaQuery.of(context).size;
    return Scaffold(
      backgroundColor: kDarkGrey2,
      body: SafeArea(
        child: Container(
          child: Column(
            children: [
              Stack(
                clipBehavior: Clip.none,
                children: [
                  Container(
                    height: size.height * .2,
                    decoration: BoxDecoration(
                        image: DecorationImage(
                            image:
                                NetworkImage("https://imgur.com/Mr6Rozm.png"))),
                  ),
                  Positioned(
                    bottom: -20,
                    left: 20,
                    child: CircleAvatar(
                      radius: 35,
                      backgroundColor: kLightGreyColor,
                      backgroundImage:
                          NetworkImage("https://i.imgur.com/MGcuXst.png"),
                    ),
                  ),
                  Positioned(
                    bottom: -33,
                    left: 100,
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          "DonaldTrump",
                          style: TextStyle(
                              color: Colors.white,
                              fontWeight: FontWeight.bold,
                              fontSize: 20),
                        ),
                        SizedBox(
                          height: 10,
                        ),
                        Text(
                          "@fintory",
                          style: TextStyle(
                            color: Colors.white,
                          ),
                        )
                      ],
                    ),
                  )
                ],
              ),
              SizedBox(
                height: 50,
              ),
              PostQuizStatListView()
            ],
          ),
        ),
      ),
    );
  }
}

class PostQuizStatListView extends StatelessWidget {
  const PostQuizStatListView({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: ListView.separated(
          shrinkWrap: true,
          itemBuilder: (BuildContext context, int index) {
            return PostQuizStat();
          },
          separatorBuilder: (BuildContext context, int index) => SizedBox(
                height: 10,
              ),
          itemCount: 5),
    );
  }
}

class PostQuizStat extends StatefulWidget {
  const PostQuizStat({
    Key? key,
  }) : super(key: key);

  @override
  _PostQuizStatState createState() => _PostQuizStatState();
}

class _PostQuizStatState extends State<PostQuizStat> {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(10),
      decoration: BoxDecoration(
          border: Border.all(color: kLightGreyColor),
          borderRadius: BorderRadius.circular(15)),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          CachedNetworkImage(
            placeholder: (context, url) =>
                Image.asset("assets/images/post_placeholder.png"),
            imageUrl: "https://imgur.com/uHZ3Mim.png",
          ),
          SizedBox(
            width: 10,
          ),
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                "The Future of sdsfd sd ffsdf sdfsdf d ",
                style:
                    TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
              ),
              SizedBox(
                height: 5,
              ),
              Text(
                "5 - 8 - 2021     14:30",
                style: TextStyle(color: Colors.white),
              )
            ],
          ),
          SizedBox(
            width: 10,
          ),
          Text(
            "88%",
            style: TextStyle(
                color: Colors.white, fontWeight: FontWeight.bold, fontSize: 30),
          )
        ],
      ),
    );
  }
}

I got this overflow issue

Huthaifa Muayyad · Answer 1 · 2021-08-14T05:20:34.653

0

Wrap these Text widgets with expanded ot flexible:


Flexible(child: Text(
                "The Future of sdsfd sd ffsdf sdfsdf d ",
        overflow: TextOverflow.fade,
        style:
              TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
              ),
)

And the other long ones in the same column. You can also wrap it with flexible instead, and use overflow:Textoverflow.elipsis.

edited Aug 14 '21 at 05:20

answered Aug 13 '21 at 17:44

Huthaifa Muayyad

11,321
3
17
49

Now I'm getting different error `RenderFlex children have non-zero flex but incoming height constraints are unbounded.`. Screenshot https://i.imgur.com/xfrRhP9.jpg – Shahrear Bin Amin Aug 13 '21 at 17:56
Use flexible instead. – Huthaifa Muayyad Aug 13 '21 at 18:12
And column mainaxissize.min – Huthaifa Muayyad Aug 13 '21 at 18:13
Thanks, @Huthaifa. But still not working, I'm now using `Flexible` and ` mainAxisSize: MainAxisSize.min`. https://imgur.com/4RclOIZ – Shahrear Bin Amin Aug 13 '21 at 18:21
Updated code https://pastebin.ubuntu.com/p/H3F37WN89T/ – Shahrear Bin Amin Aug 13 '21 at 18:23

score 0 · Answer 2 · answered Aug 13 '21 at 17:45

` Text(

 "The Future of sdsfd sd ffsdf sdfsdf d ",
            style:
                TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
          ),`

is overflowing. There isn't enough space to display the entire text. You can either make it multiline or use overflow property of Text

score 0 · Answer 3 · answered Aug 13 '21 at 17:51

0

Try to add your Text Widget inside Expanded or Flex Widget see my answer here

Expanded (
   child: Text (),
  ),

answered Aug 13 '21 at 17:51

Ravindra S. Patil

11,757
3
13
40

Now I'm getting different error `RenderFlex children have non-zero flex but incoming height constraints are unbounded.`. Screenshot here https://i.imgur.com/xfrRhP9.jpg – Shahrear Bin Amin Aug 13 '21 at 17:57
Try to add `mainaxissize.min` inside Column widget – Ravindra S. Patil Aug 13 '21 at 18:26

score 0 · Answer 4 · answered Aug 13 '21 at 19:30

Just surround the column with expanded like the following

  Expanded(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          "The Future of sdsfd sd ffsdf sdfsdf d ",
          style:
          TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
        ),
        SizedBox(
          height: 5,
        ),
        Text(
          "5 - 8 - 2021     14:30",
          style: TextStyle(color: Colors.white),
        )
      ],
    ),
  ),

A RenderFlex overflowed by x pixels on the right

4 Answers4