how to fix widget render issue in flutter app - flutter

Question

I am getting that infamous error, which I am not able to resolve.
RenderBox was not laid out: RenderRepaintBoundary#03a24 relayoutBoundary=up14 NEEDS-PAINT
'package:flutter/src/rendering/box.dart':
Failed assertion: line 2001 pos 12: 'hasSize
I tried all sorts of wrapping of widgets. The error is on the Container(). In that container I am trying to display 10 newest products, scrolled horizontaly, and fetched from the firestore database. Below, I display list of outlets, scrolled vertically and they do not cause any problem, neither the horizontal scrolling widget, which displays categories.
I have a tabscreen and in the TabView I have this class:
class UserHomeMerch extends StatefulWidget {
UserHomeMerch({Key? key}) : super(key: key);
#override
UserHomeMerchState createState() => UserHomeMerchState();
}
Class UserHomeMerchState extends State<UserHomeMerch> {
#override
Widget build(BuildContext context) {
final outletData = Provider.of<OutletData>(context);
return GestureDetector(
onTap: () {
FocusScope.of(context).unfocus();
},
child: Scaffold(
body: Stack(
children: <Widget>[
Container(
decoration: const BoxDecoration(
image: DecorationImage(image: AssetImage("assets/images/background.jpg"),
fit: BoxFit.cover,),
),
),
FutureBuilder(
future: outletData.getAllOutlets(context),
builder: (ctx, AsyncSnapshot snapshot) {
if (snapshot.connectionState == ConnectionState.waiting ||
snapshot.data == null) {
return Center(
child: CircularProgressIndicator(color: color4),
);
}
var sd = snapshot.data;
return SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.all(10.0),
child: Text(
Languages.of(context)!.category+':',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 21,
color: color1,
),
),
),
Categories(),
Padding(
padding: const EdgeInsets.all(10.0),
child: Text(
Languages.of(context)!.newProducts,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 21,
color: color1,
),
),
),
Container( =====> this is the error line
height: 250,
child: StreamBuilder<QuerySnapshot>(
stream: productsRef
.orderBy('timestamp', descending: true)
.limit(10)
.snapshots(),
builder: (context, snapshot) {
return (snapshot.connectionState == ConnectionState.waiting)
? Center(child: CircularProgressIndicator(color: color4,))
: ListView.builder(
physics: NeverScrollableScrollPhysics(),
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemCount: snapshot.data!.docs.length,
itemBuilder: (context, index) {
DocumentSnapshot data = snapshot.data!.docs[index];
return ProductItem(
productId: data[productId],
productName: data[productName],
productDescription: data[prodDesc],
productPrice: data[productPrice],
count: data[countInStock],
images: data['productImagesUrl'],
outletID: data[outletId],
merchId: data[merchantId]
);
});
},
)),
Padding(
padding: const EdgeInsets.all(10.0),
child: Text(
Languages.of(context)!.producers+':',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 21,
color: color1,
),
),
),
sd.length == 0
? Center(
child: Text(Languages.of(context)!.noOrg),
)
: ListView.builder(
padding: EdgeInsets.zero,
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
itemBuilder: (ctx, index) {
return OutletItem(
outletName: sd[index][outletName],
id: sd[index][outletId],
category: sd[index][category],
outletImage: sd[index][outletImg],
outletRating: sd[index][outletRating],
merchId: sd[index][merchantId],
);
},
itemCount: sd.length,
),
],
),
);
},
),
]),
));
}
}
My productItem widget is a card, with the tap displays bottomModal, here it is:
class ProductItem extends StatelessWidget {
final String productId;
final String productName;
final String productDescription;
final num productPrice;
final num count;
final List<dynamic> images;
final String outletID, merchId;
ProductItem(
{required this.productId,
required this.productName,
required this.productDescription,
required this.productPrice,
required this.count,
required this.images,
required this.outletID,
required this.merchId});
#override
Widget build(BuildContext context) {
return Padding(
padding: EdgeInsets.symmetric(horizontal: 20),
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30)),
elevation: 20,
color: color2.withOpacity(0.5),
shadowColor: color2.withOpacity(0.2),
child: Column(
children: [
Container(
alignment: Alignment.center,
child: Image.network(
images.first,
//height: 500,
//width: 500,
fit: BoxFit.cover,
),
height: 250,
//width: 100,
),
ListTile(
selectedColor: Colors.white70,
title: Text(
productName,
overflow: TextOverflow.fade,
softWrap: true,
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
subtitle: Text(
"₮ ${NumberFormat.decimalPattern().format(productPrice)}",
),
trailing: TextButton.icon(
onPressed: () {
showModal(context, productId, productName, productDescription, productPrice, images, count, outletID, merchId);
},
icon: Icon(
Icons.add,
color: Colors.black54,
),
label: Text(
Languages.of(context)!.seeProf,
),
style: ButtonStyle(
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
side: BorderSide(
color: Colors.black54,
),
),
),
),
),
),
Divider(thickness: 2),
],
),
),
);
}
}
Please, help me fix this issue. Thank you very much in advance!

Answer 1

I think the error is on the second listview builder. try wrapping it with an Expanded widget. if not and you are 100% sure on it's on the horizontal listview builder try giving the container a width and wrapping the listview builder with an Expanded Widget.
I hope this helps