Issue
i am new in flutter and firebase integration. i am trying to build mobile app that connect to firestore.
i am trying to use paginate firestore in my mobile app. But i got error message that said "A RenderShrinkWrappingViewport expected a child of type RenderSliver but received a child of type RenderFlex."
this is my code
Widget build(BuildContext context) {
return Container(
child: StreamBuilder<QuerySnapshot>(
stream: FirebaseFirestore.instance
.collection('vendors')
.orderBy('shopName').snapshots(),
builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapShot) {
if (snapShot.data == null) return CircularProgressIndicator();
if(snapShot.hasData){
print("error");
}
return Padding(
padding: EdgeInsets.all(8),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
RefreshIndicator(
child: PaginateFirestore(
bottomLoader: CircularProgressIndicator(
valueColor: AlwaysStoppedAnimation<Color>(
Theme.of(context).primaryColor),
),
header: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding:
const EdgeInsets.only(left: 8, right: 8, top: 20),
child: Text(
'All Nearby Stores',
style: TextStyle(
fontWeight: FontWeight.w900, fontSize: 18),
),
),
Padding(
padding:
const EdgeInsets.only(left: 8, right: 8, top: 20),
child: Text(
'Find quality products near you',
style: TextStyle(
fontWeight: FontWeight.w900,
fontSize: 12,
color: Colors.grey),
),
),
],
),
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
itemBuilderType: PaginateBuilderType.listView,
itemBuilder: (index, context, document) => Padding(
padding: const EdgeInsets.all(4),
child: Container(
width: MediaQuery.of(context).size.width,
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
SizedBox(
width: 120,
height: 100,
child: Card(
child: ClipRRect(
borderRadius: BorderRadius.circular(4),
child: Image.network(
document['imageUrl'],
fit: BoxFit.fill,
),
),
),
),
SizedBox(
width: 10,
),
Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
height: 35,
child: Text(
document['shopName'],
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.bold,
),
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
),
SizedBox(
height: 3,
),
Container(
width:
MediaQuery.of(context).size.width - 250,
child: Text(
document['location'],
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.bold),
)),
SizedBox(
height: 3,
),
Row(
children: [
Icon(
Icons.star,
size: 12,
color: Colors.grey,
),
SizedBox(
width: 4,
),
Text(
'3.2',
style: TextStyle(
fontSize: 10,
),
)
],
)
],
)
],
),
),
),
query: FirebaseFirestore.instance
.collection('vendors')
.orderBy('shopName'),
listeners: [
refreshChangeListener,
],
footer: Padding(
padding: const EdgeInsets.only(top: 30),
child: Container(
child: Stack(
children: [
Center(
child: Text(
"that's al folks",
style: TextStyle(color: Colors.grey),
),
),
Image.asset(
"image/city.png",
),
Positioned(
right: 10,
top: 80,
child: Container(
width: 100,
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Text(
'Made By : ',
style: TextStyle(color: Colors.black),
),
Text(
"IZZILLY TEAM",
style: TextStyle(
fontWeight: FontWeight.bold,
letterSpacing: 2,
color: Colors.grey),
)
],
),
))
],
),
),
),
),
onRefresh: ()async{
refreshChangeListener.refreshed = true;
},
)
],
),
);
},
),
);
}
does anyone know how to solve this error?
thank you
Solution
According to related issues, something that your code should do is to wrap the header and footer widgets (and other box type widgets) inside a SliverToBoxAdapter. You can refer to this other question and this Github issue to see sample code which resemble yours. Wrapping your header, for example, would look like this according to the related question:
header: SliverToBoxAdapter(
child: Column(
...
),
),
You should also attach logs and error details in your question like those present in the github issue and related question I linked. It would shine more light into the details leading to the error.
Answered By – ErnestoC
Answer Checked By – Marilyn (FlutterFixes Volunteer)