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()
)
)
)
)
);