Home > OS >  How to arrange scrollable layout for list of widgets in flutter?
How to arrange scrollable layout for list of widgets in flutter?

Time:11-11

I want to build a scrollable widget that consists of some Text widgets (and maybe some other widgets) that are produced by a function. However, I'm getting the following error:

A RenderFlex overflowed by 701 pixels on the bottom.

I'm not sure what the best layout is here. Should the scrollable Column be placed outside the container? Is a Column at the innermost nesting required? Is another Expanded widget required?

Also, the Text inside the widget list should be aligned left, not centereed. If someone could help with a useful solution, I'd be very thankful!

Here's my current code:

List<Widget> getWidgetList(){
// do some stuff and return a list
return [Text("foo"), Text("bar")];
}

@override
Widget build(BuildContext context) => Scaffold(... body:
      Container(
          padding: EdgeInsets.all(20),
          child:
          SingleChildScrollView(
              scrollDirection: Axis.vertical,
              child:
              SizedBox(
                  height: MediaQuery.of(context).size.height,
                  child:
                  Column(
                      children: getWidgetList()
                  )
              )
          )
      )
    );
}

CodePudding user response:

I think the overflow happens from getWidgetList. Remove the fixed height from SizedBox,

You can use ListView, it provide padding params,

ListView(
  padding: EdgeInsets.all(20),
  children: [
    ...getWidgetList(),
  ],
),

Old

   Container(
          padding: EdgeInsets.all(20),
          child:
          SingleChildScrollView(
              scrollDirection: Axis.vertical,
              child:
              SizedBox(
                 // height: MediaQuery.of(context).size.height,
                  child:
                  Column(
                      children: getWidgetList()
                  )
              )
          )
      )
    );
  • Related