RenderFlex overflowed Flutter

Question

I'm new in Flutter and at the moment I'm having an issue that cannot get fixed. In my training I made an app that looks ok in the Andriod simulator Nexus 5X and Nexus 6 but not ok on Nexus One which has a smaller screen. I generated the APK and installed on my Huawei Mate 9 (5.9") and also not ok. Note that my Huawei, Nexus 5X and Nexus 6 all have a similar screen size.

I have checked similar questions on this site and have tried many things but still cannot fix it.

Is there any way that my Widgets self-size according to the size of the screen? or What do you suggest to prevent/fix this RenderFlex overflowed issue.

The only other thing I thought is reducing the size of the icons/text.

Here is my code.

Many thanks for your time.

Answer 1

Render overflow happens when the defined pixels(hardcoded heights, width or any dimensions). It will not happen until the widget collides with each other. To tackle this you would require dynamic height constraints basically speaking mediaQuery.MediaQuery will give you information about your device and one of the information is device size an example is provided below.

I have provided an example below on how MediaQuery is implemented in basic applications. For in-depth details see this video

https://www.youtube.com/watch?v=A3WrA4zAaPw

class Dimensions {
  static double boxWidth;
  static double boxHeight;

  Dimensions(BuildContext context) {
    boxHeight = MediaQuery.of(context).size.height / 100;
    boxWidth = MediaQuery.of(context).size.width / 100;
  }
}

In the above code boxHeight and boxWidth are basically height and width in percentage .

Answer 2

You could try using a flutter widget called Expanded. Try wrapping each widget on the page with a flex value depending on how much of the total screen space should be assigned to that widget. This prevents the render overflow error.