How to put elements under each other with a ListView? - flutter

Question

I'm having a hard time to put items under each other when a ListView is involved.
I've this code :
body:
Column(
children: [
Text('foo'),
Expanded(
child: ListView.builder(
controller: ...,
itemCount: ...,
itemBuilder: ...
)
),
Text('bar')
]
)
,
It gives me the result on the left, but I'd like the one on the right :
I tried to put the ListView in a Container (with an height: double.maxFinite) but its give me an : Bottom overflowed by X pixels.
Edit : Here is the result I'm trying to achieve (run the snippet in "full page") :
body {
font-size: 18px;
margin: 0;
padding: 0;
}
.mobile {
position: relative;
width: 320px;
margin: 0 auto;
border: 1px solid cyan;
max-height: 400px;
overflow-y: scroll;
padding-top: 41px;
}
.appbar {
position: fixed;
top: 0;
width: 300px;
background: rgba(0, 0, 0, 1);
color: white;
padding: 10px;
}
.text {
background: rgba(255, 0, 0, .3);
padding: 10px;
}
.list-view {
background: rgba(0, 255, 0, .3);
padding: 10px;
min-height: 500px;
}
<div class="mobile">
<div class="appbar">AppBar</div>
<div class="text">Text</div>
<div class="list-view">ListView</div>
<div class="text">Text</div>
</div>

Answer 1

You have to use a CustomScrollView
CustomScrollView(
slivers: <Widget>[
SliverToBoxAdapter(
child: Text("Text"),
),
SliverList(
delegate: SliverChildListDelegate( [
Container(
height: 200.0,
decoration: BoxDecoration(color: Colors.orange),
),
Container(
height: 400.0,
decoration: BoxDecoration(color: Colors.pink),
),
Container(
height: 500.0,
decoration: BoxDecoration(color: Colors.blue),
)
]),
),
SliverToBoxAdapter(
child: Text("Text"),
),
],
)
Notice you can use a SliverChildListDelegate or a SliverChildBuilderDelegate

Answer 2

Try this one
body:
Column(
children: [
Text('foo'),
Expanded(
child: Container(
child: ListView.builder(
shrinkWrap: true,
itemBuilder: .......,
itemCount: .....,
),
),
),
Text('bar')
]
)
,
This code worked for me.

Answer 3

You can add the top and bottom foo and bar as the first and last items of the list. The ListView will have list.length + 2 items.
body: Column(children: [
Text('foo'),
Expanded(
child: ListView.builder(
itemCount: list.length + 2,
itemBuilder: (context, index) {
if (index == 0)
return Text("foo");
else if (index < list.length + 1)
return Text("$index");
else
return Text('bar');
},
),
),
]),