close

[Solved] Flutter: How to fix “A RenderFlex overflowed by pixels ” error?

Hello Guys How are you all? Hope You all are fine. When I was trying to run my flutter app and suddenly I get the following error in my stack track. A RenderFlex overflowed by pixels in a flutter. So today Here I come with all possible solutions for this error.

We are providing you all possible solutions to solve this error. let’s start this article without wasting your time.

How A RenderFlex overflowed by pixels Error Occurs?

I Have simple GridView builder. But Its give me RenderFlex error.

Flutter: How to fix “A RenderFlex overflowed by pixels ” error?,
A RenderFlex overflowed by pixels,
renderflex overflowed by pixels,
renderflex overflowed by pixels error,
resized to fit inside constraints

Here Is my Code

      body: GridView.builder(
        itemCount: 15,
        gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
        itemBuilder: (BuildContext context, int index) {
          return Container(
            padding: EdgeInsets.all(5),
            child: Column(
              children: <Widget>[
                Container(
                  child: Image.network("https://i.picsum.photos/id/182/200/300.jpg?hmac=W6MnOpe7fP0LlNAyWl6rzWbjyLOM3ix2TXRcFx7vEPE"),
                ),
                Container(
                  padding: EdgeInsets.all(10),
                  child: Text("Text"),
                )
              ],
            ),
          );
        },
      )

Here is My Error


======== Exception caught by rendering library =====================================================
The following assertion was thrown during layout:

A RenderFlex overflowed by 134 pixels on the bottom.

How to fix “A RenderFlex overflowed by pixels ” error

  1. How to fix “A RenderFlex overflowed by pixels ” error

    To fix A RenderFlex overflowed by pixels you just have to Wrap Image in flex widget Expanded, height available is calculated then shared among Expanded (as constraints) and Image is resized to fit inside Expanded constraints.

  2. A RenderFlex overflowed by pixels

    To fix A RenderFlex overflowed by pixels you just have to Wrap Image in flex widget Expanded, height available is calculated then shared among Expanded (as constraints) and Image is resized to fit inside Expanded constraints.

Solution 1: Use Expanded

Wrapping Image in flex widget Expanded, height available is calculated then shared among Expanded (as constraints) and Image is resized to fit inside Expanded constraints:

Container(
   child: Image.network("https://i.picsum.photos/id/182/200/300.jpg?hmac=W6MnOpe7fP0LlNAyWl6rzWbjyLOM3ix2TXRcFx7vEPE"),
),

Replace Container to Expanded.

Expanded(
   child: Image.network("https://picsum.photos/500/500/?random"),
),

Solution 2 : Use fit

Use fit property in your Image.network method to reduce the size of your image, since they are bigger and overflowing from your container, or you can enlarge your Containers by their height and width properties.

Summery

So, It’s All About This Error. I hope this tutorial helps you to Solve your error. Please Comment Below if You stucks anywhere with my code. And please comment below on which solution worked for you. Thank You.

Also Check Out Below Tutorials

Leave a Comment

%d bloggers like this: