[Flutter] NestedScrollView with a ListView in body, constraint problem

The problem is with the body of the NestedScrollView, the ListView.builder which returns ProductInfoTile widgets is wrapped in a SizedBox. This SizedBox is too big for the screen when the NestedScrollView is not scrolled.

See this screenshot, this is when the screen is initially loaded: screen initial load

And this is it with it scrolled down: screen after scrolling

The ideal behavior would be for the NestedScrollView to scroll first, then the ListView take over in scrolling the menu items. This is currently working, but the constraints are wrong. I am getting overflow errors.

Can anyone help? Thank you


class ViewState extends State<_InventoryView> {

@override
Widget build(BuildContext context) {
return Scaffold(
body: NestedScrollView(
physics: const AlwaysScrollableScrollPhysics(),
headerSliverBuilder: (context, innerBoxIsScrolled) {
Color appBarBackGroundColor = Colors.white;
const borderRadius = BorderRadius.only(
topLeft: Radius.circular(30),
topRight: Radius.circular(30),
);
return [
...
];
},
// Product Details
body: Container(
color: ColorRes.lightGreyBackground,
child: Padding(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
color: ColorRes.lightGreyBackground,
child: Padding(
padding: const EdgeInsets.only(top: 25.0),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Text(
truncateName(
widget.storeInfo.name ?? '', 20),
style: AppTextStyles.style18BoldBlack,
),
SizedBox(width: 5),
GestureDetector(
onTap: () {
...
child: Icon(Icons.arrow_drop_down_circle,
color: ColorRes.primaryColor))
],
),
],
),
if (widget.storeInfo.weightedRatingValue != null)
Container(
decoration: const BoxDecoration(
color: Colors.white,
borderRadius:
BorderRadius.all(Radius.circular(5.0)),
),
child: Padding(
padding: const EdgeInsets.all(2.0),
child: RatingBarWidget(
onRatingChanged: null,
rating: widget.storeInfo.weightedRatingValue!,
size: 15,
),
),
),
],
),
SizedBox(height: 15),
PreferredSize(
preferredSize: Size.fromHeight(82.5),
child: SelectedOrderServiceTypeInfoView(
showDistance: true,
distance: widget.storeInfo.miles ?? 0.0),
),
],
),
),
),
// Store Menu
(inventoryCtrlObj.isInventoryLoading)
? const LoadingWidget()
: (inventoryCtrlObj.getInventoryData == null)
? const SizedBox()
: StatefulBuilder(
builder: (context, setStoreProductPageState) {
return Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Column(
children: [
Consumer<ProductController>(
builder: (context, productCtrlObj, _) {
return SizedBox(
height: MediaQuery.of(context)
.size
.height *
0.8,
child: ListView.builder(
physics:
const NeverScrollableScrollPhysics(),
shrinkWrap: true,
itemCount: productCtrlObj
.storeItemsList.length,
itemBuilder:
(context, storeProductIndex) {
final product =
productCtrlObj.storeItemsList[
storeProductIndex];
return ProductInfoTile(
product,
isStoreProducts: true,
isInRow: true,
press: () {
navigateToProductDetailPage(
context, product);
},
);
},
),
);
},
),
],
),
],
);
},
),
],
),
),
),
));
}
}

Continue reading...