[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.

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

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

• How to pass data between screens in Flutter?
• How do I Set Background image in Flutter?
• the element type ‘Listwidget’ can’t be assigned to the list type ‘Widget’
• Error: List is not a subtype of type Map
• How to Change the App DisplayName in Flutter Application?