Horizontal ListView inside SliverAppBar - firebase

Question

I am trying to add a Horizontal ListView.builder Inside a SliverAppBar, but every list item appears on top of each other like a traditional list (VERTICLE), when try to change the Scroll direction the whole list disappear.
this is the Items inside SAB
body: SingleChildScrollView(
child: Column(
children: [
CATS(),
Center(
child: Text('خانه های کرایی جدید'),
SizedBox(height: 5),
LatestForRent(),//TO BE SCROLLED HORIZONTAL
SizedBox(height: 5),
Center(
child: Text('خانه های فروشی جدید'),
SizedBox(height: 5),
LatestForSale(), //TO BE SCROLLED HORIZONTAL
SizedBox(height: 5),
Center(
child: Text('خانه های گروی جدید'),
SizedBox(height: 5),
LatestGerawi(),//TO BE SCROLLED HORIZONTAL
this is the List
StreamBuilder(
stream: FirebaseFirestore.instance
.collection('Sell')
.orderBy('TS', descending: true)
.snapshots(),
builder: (context, snapshot) {
if (snapshot.data == null)
return Center(
child: CircularProgressIndicator(
backgroundColor: Colors.red,
valueColor: new AlwaysStoppedAnimation<Color>(Colors.cyan[400]),
),
);
return ListView.builder(
// scrollDirection: Axis.horizontal,
shrinkWrap: true,
itemCount: 2,
itemBuilder: (context, index) => Padding(
padding: const EdgeInsets.all(5.0),
child: Container(
height: 200,
width: 300,

Answer 1

Give an height to your ListView.
StreamBuilder(
stream: FirebaseFirestore.instance
.collection('Sell')
.orderBy('TS', descending: true)
.snapshots(),
builder: (context, snapshot) {
if (snapshot.data == null)
return Center(
child: CircularProgressIndicator(
backgroundColor: Colors.red,
valueColor: new AlwaysStoppedAnimation<Color>(Colors.cyan[400]),
),
);
return Container(
height: 200,
child:ListView.builder(
scrollDirection: Axis.horizontal,
shrinkWrap: true,
itemCount: 2,
itemBuilder: (context, index) => Padding(
padding: const EdgeInsets.all(5.0),
child: Container(
height: 200,
width: 300,
)));