Exception caught by rendering library | Flutter - flutter

Question

What I want to do,
first list view scroll horizontally and the second one and full-screen scroll vertically.
(When the user scrolls vertically, the first listview will be hidden)
Like Facebook feed screens
the first list looks like a story row,
the second list looks like posts.
This picture shows what I want to do simply
I tried,
my code here :
Stack(
children: [
SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
SizedBox(
height: 100.0,
child: ListView.builder(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemCount: snapshot.data!.docs.length,
itemBuilder: (context, index) => PostCard(
snap: snapshot.data!.docs[index].data(),
),
),
),
Text(
'Demo Headline 2',
style: TextStyle(fontSize: 18),
),
ListView.builder(
itemCount: snapshot.data!.docs.length,
itemBuilder: (context, index) => PostCard(
snap: snapshot.data!.docs[index].data(),
),
),
],
),
),
Align(
alignment: Alignment.bottomRight,
child: Padding(
padding: const EdgeInsets.only(bottom: 80, right: 10),
child: FloatingActionButton(
elevation: 100,
onPressed: () {
Navigator.pushNamed(context, '/add');
},
child: const Icon(
Icons.add,
size: 32,
color: Colors.amber,
),
backgroundColor: Colors.black,
),
),
),
],
);
My code shows this error
Exception caught by rendering library
RenderBox was not laid out: RenderRepaintBoundary#90e8f relayoutBoundary=up16 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
package:flutter/…/rendering/box.dart:1
Failed assertion: line 2001 pos 12: 'hasSize'

Answer 1

Try below code and shrinkWrap: true, in 2nd Listview
Listview Widget:
Expanded(child:
ListView.builder(
shrinkWrap: true,//add this line
itemCount: snapshot.data!.docs.length,
itemBuilder: (context, index) => PostCard(
snap: snapshot.data!.docs[index].data(),
),
),
),
Full Code:
Scaffold(
body: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
SizedBox(
height: 100.0,
child: ListView.builder(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemCount: 5,
itemBuilder: (context, index) => Container(
padding: const EdgeInsets.all(12),
margin: const EdgeInsets.all(12),
height: 150,
width: 150,
color: Colors.pink,
),
),
),
Text(
'Demo Headline 2',
style: TextStyle(fontSize: 18),
),
Expanded(
child: ListView.builder(
itemCount: 10,
shrinkWrap: true,
itemBuilder: (context, index) => Container(
padding: const EdgeInsets.all(12),
margin: const EdgeInsets.all(12),
height: 150,
width: 150,
color: Colors.amber,
),
),
),
],
),
floatingActionButton: FloatingActionButton(
elevation: 100,
onPressed: () {
Navigator.pushNamed(context, '/add');
},
child: const Icon(
Icons.add,
size: 32,
color: Colors.amber,
),
backgroundColor: Colors.black,
),
);
Result->