I am new to flutter and having trouble with layouts.
A sticky header and a scroll view below it. I thought of using Column widget with two children - first being the header and second being the ListView.
Here is my code
Widget build(BuildContext context) {
return Material(
elevation: 8.0,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(16.0),
child: Text(
title,
style:
Theme.of(context).textTheme.subhead.copyWith(fontSize: 18.0),
textAlign: TextAlign.left,
),
),
Divider(height: 4.0),
ListView.builder(itemBuilder: (context, i) {
return ListTile(
title: Text("Title $i"),
subtitle: Text("Subtitle $i"),
);
}),
],
),
);
}
I am getting the following error for it.
I/flutter ( 5725): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter ( 5725): The following assertion was thrown during performResize():
I/flutter ( 5725): Vertical viewport was given unbounded height.
I/flutter ( 5725): Viewports expand in the scrolling direction to fill their container.In this case, a vertical
I/flutter ( 5725): viewport was given an unlimited amount of vertical space in which to expand. This situation
I/flutter ( 5725): typically happens when a scrollable widget is nested inside another scrollable widget.
I/flutter ( 5725): If this widget is always nested in a scrollable widget there is no need to use a viewport because
I/flutter ( 5725): there will always be enough vertical space for the children. In this case, consider using a Column
I/flutter ( 5725): instead. Otherwise, consider using the "shrinkWrap" property (or a ShrinkWrappingViewport) to size
I/flutter ( 5725): the height of the viewport to the sum of the heights of its children.
I added made shrinkWrap of ListView true as mentioned in the message, but that didn't work either.
The parent of this layout is a stack containing various such layout-pages, all of this layout pages being offstage expect the one user has selected.
What am I doing wrong?
Try wrapping your ListView.builder
with a Flexible
or Expanded
widget:
Flexible(
child: ListView.builder(
itemBuilder: (context, i) {
return ListTile(
title: Text("Title $i"),
subtitle: Text("Subtitle $i"),
);
},
),
),