How to handle Column overflow in Flutter

Question

I created a simple web app with Flutter. The app layout is divided in two vertically zones: on the left there is a small top-bottom menu, on the right there is the main content inside a DataTable.

I wrapped the DataTable inside a SingleChildScrollView and everything worked fine. The left side, on the other hand, keeps giving me a vertical overflow.

The tree on the left side is as follows:

Row(
  children: [
        //Left side menu
        Flexible(
           Container(
             Column()
           ), //Container
        ), //Flexible

        //Right side 
        Flexible(...),
 ],
), //Row

Obviously it is a very simplified version.

I've tried to insert a SingleChildScrollView in almost all places (Column, Container, Flexible), but it doesn't work and it always returns the error.

A RenderFlex overflowed by 174 pixels on the bottom.

Any solutions?

Thank you!

Answer 1

My approach would be to use MediaQuery to get current height and width of the web window. Then spilt the available width in the ratio of 2:7 maybe? You can play around with the ratio.

Now, lets keep the body of Scaffold to be Container with width as MediaQuery.of(context).size.width and height as ... .height. Now Row with childrens be 2 Expanded widgets with flex 2 and flex 7 respectively. Now we have to portion in the screen in the ratio 2:7.

On the left side, as you said, you need a menu, let it be

Expanded(
 flex:2,
  child: Column())

And on the other side be-

Expanded(
  flex:7,
  child: Container(
    child: SingleChildScrollView() ///then add your stuff for scrolling purposes.
  )
)

learn more about MediaQuery here

learn more about Expanded here