How can i make a stack nested in a scaffold scrollable - flutter

Question

sorry if the image is too fat, I don't know how to format image in stack, so, this is what I wanna achieve, and I've done this with the following code, but I get an error and my screen goes white(showing the scaffold, refusing to render my widgets coz of the errors), I know in some way I have to constrain some widget somewhere, but I don't know which to give a height, since I need my entire screen to be scrollable, I've even tried to not make entire screen scrollable or give the children of the lower container some fixed height like 900, but still, not working, how can I achieve this,
This is my code so far
#override
Widget build(BuildContext context) {
_animationController.forward();
return Consumer<ProductsModel>(
builder: (_, pModel, __) => Scaffold(
body: SingleChildScrollView(
child: Stack(
children: [
Positioned(
left: 0,
right: 0,
child: Container(
width: double.maxFinite,
height: Dimensions.height395,
color: const Color(0xffF8F9FA),
child: Stack(
children: [
PageView.builder(
itemCount: widget.product.productImages!.length,
controller: _pageController,
onPageChanged: (value) {
_currentPage = value;
_animationController.forward();
// setState(() {});
},
itemBuilder: (context, index) {
return Center(
child: Container(
margin: EdgeInsets.only(top: Dimensions.height50),
width: Dimensions.productDetailContainerWidth,
height: Dimensions.productDetailContainerHeight,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(
widget.product.productImages![index],
),
),
),
),
);
},
),
Align(
alignment: Alignment.bottomCenter,
child: Padding(
padding: EdgeInsets.only(bottom: Dimensions.height20),
child: DotsIndicator(
dotsCount: widget.product.productImages!.length,
position: _currentPageValue,
decorator: DotsDecorator(
activeColor: kMainColour,
size: const Size.square(9.0),
activeSize: const Size(18.0, 9.0),
activeShape: RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(Dimensions.radius5)),
),
),
),
),
Align(
alignment: Alignment.bottomRight,
child: Padding(
padding: EdgeInsets.only(
bottom: Dimensions.height20,
right: Dimensions.height20),
child: GestureDetector(
onTap: () {
pModel.toggleSave(context, widget.product);
},
child: Container(
height: Dimensions.height32,
width: Dimensions.height32,
decoration: BoxDecoration(
color: Colors.white,
shape: BoxShape.circle,
border: Border.all(
color: const Color(0xffDADADA),
),
),
child: Icon(
widget.product.isSaved
? IconlyBold.heart
: IconlyBroken.heart,
color: kMainColour,
),
),
),
),
),
],
),
),
),
// todo: nav row
Positioned(
top: Dimensions.height45,
right: Dimensions.height20,
left: Dimensions.height20,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
BackNavButton(
onTap: () {
Navigator.pop(context);
},
),
Text(
widget.product.productSeller!,
style: TextStyle(
fontFamily: kFontFamily,
fontWeight: FontWeight.w600,
fontSize: Dimensions.font14,
),
),
SvgPicture.asset("assets/icons/chat_icon.svg")
],
),
),
// todo: review and details
Positioned(
left: 0,
right: 0,
top: Dimensions.height395 - Dimensions.height10,
child: Container(
height: 900,
padding: EdgeInsets.only(left: Dimensions.height20, right: Dimensions.height20, top: Dimensions.height20),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(Dimensions.radius20),
color: Colors.white,
),
child: Row(
children: [
Column(
children: [
Text(
widget.product.productName!,
style: TextStyle(
fontFamily: kFontFamily,
fontWeight: FontWeight.w500,
fontSize: Dimensions.font18,
),
),
Visibility(
visible: widget.product.discount != null,
child: Text(
"(${widget.product.discount}% Discount)",
style: TextStyle(
fontFamily: kFontFamily,
fontWeight: FontWeight.w500,
fontSize: Dimensions.font13,
color: const Color(0xff9098B1),
),
),
),
const FilterRating(
stars: 4,
),
],
),
Column(
children: [
],
),
],
),
),
),
],
),
),
),
);
}