I'm using Custom scroll view over the stack to get a scrollable behaviour But it is not getting scrolled.
I've tried the approach Using single child scroll view But it was giving me an error of infinite size So I've switched to this approach My stack widgets are getting layered properly, but my overall stack is not getting scrolled. Below is my code.
child: Scaffold(
backgroundColor: colorScheme.background,
body: CustomScrollView(
// scrollDirection: Axis.vertical,
// shrinkWrap: true,
// physics: NeverScrollableScrollPhysics(),
slivers: [
SliverFillRemaining(
hasScrollBody: true,
child: Stack(children: [
Image.asset('assets/images/demoProduct.png'),
Positioned(
top: MediaQuery.of(context).size.height / 2 - 50,
// bottom: 0,
child: Container(
padding:
EdgeInsets.symmetric(horizontal: 35.w, vertical: 30),
// height: 900,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20),
topRight: Radius.circular(20),
),
color: Color(0xFFFFFBF8)),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
SizedBox(
width: 196.w,
child: Text(
'Bauhaus Enamel Colander Long Name',
style: TextStyle(
fontSize: 18.sp,
fontFamily: 'Mulish',
color: Color(0xFF4B4B4B),
fontWeight: FontWeight.w900),
),
),
Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text(
'\$ 75.99',
style: TextStyle(
fontSize: 28.sp,
fontFamily: 'Mulish',
color: Color(0xFF00373E),
fontWeight: FontWeight.w900),
),
Text(
'\$ 99.99',
style: TextStyle(
fontSize: 14.sp,
fontFamily: 'Mulish',
color: Color(0xFF8E8E8E),
fontWeight: FontWeight.w900),
),
],
),
],
),
SizedBox(
height: 10,
),
Text(
"By Darling Spring",
style: TextStyle(
fontSize: 12.sp,
fontFamily: 'Mulish',
color: Color(0XFF4DA1A1),
decoration: TextDecoration.underline,
fontWeight: FontWeight.w500,
),
),
SizedBox(
height: 10,
),
Row(
children: [
Icon(
Icons.star_rate_rounded,
color: Color(0XFFC7B661),
),
Icon(
Icons.star_rate_rounded,
color: Color(0XFFC7B661),
),
Icon(
Icons.star_rate_rounded,
color: Color(0XFFC7B661),
),
Icon(
Icons.star_rate_rounded,
color: Color(0XFFC7B661),
),
Icon(
Icons.star_rate_rounded,
color: Color(0XFFC7B661),
),
Text(
'(83)',
style: TextStyle(
fontSize: 12.sp,
fontFamily: 'Mulish',
color: Color(0xFF1D1F22),
fontWeight: FontWeight.w400),
),
],
),
SizedBox(
height: 20,
),
Text(
'Color',
style: TextStyle(
fontSize: 14.sp,
fontFamily: 'Mulish',
color: Color(0xFF4B4B4B),
fontWeight: FontWeight.w400),
),
SizedBox(
height: 5,
),
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
children: [
...List.generate(
palleteColors.length,
(index) => buildColorPallete(
color: palleteColors[index],
isSelected: _selectedColor == index,
onTap: () {
setState(() {
_selectedColor = index;
});
},
),
),
],
),
),
SizedBox(
height: 15,
),
Text(
'Size',
style: TextStyle(
fontSize: 14.sp,
fontFamily: 'Mulish',
color: Color(0xFF4B4B4B),
fontWeight: FontWeight.w400),
),
Row(
children: [
_buildSize(
title: 'S',
isSelected: _selectedSize == 0,
onTap: () {
setState(() {
_selectedSize = 0;
});
}),
_buildSize(
title: 'M',
isSelected: _selectedSize == 1,
onTap: () {
setState(() {
_selectedSize = 1;
});
}),
_buildSize(
title: 'L',
isSelected: _selectedSize == 2,
onTap: () {
setState(() {
_selectedSize = 2;
});
}),
],
),
SizedBox(
height: 5,
),
Text(
"Size Chart",
style: TextStyle(
fontSize: 12.sp,
fontFamily: 'Mulish',
color: Color(0xFF00798C),
decoration: TextDecoration.underline,
fontWeight: FontWeight.w500,
),
),
SizedBox(
height: 20,
),
Text(
'Quantity',
style: TextStyle(
fontSize: 14.sp,
fontFamily: 'Mulish',
color: Color(0xFF4B4B4B),
fontWeight: FontWeight.w400),
),
SizedBox(
height: 5,
),
Row(
children: [
CupertinoButton(
padding: EdgeInsets.only(right: 10),
onPressed: () {},
child: Container(
padding: EdgeInsets.all(12),
decoration: BoxDecoration(
color: Colors.transparent,
shape: BoxShape.circle,
border: Border.all(
color: Color(0xFF4B4B4B),
)),
child: Icon(
Icons.remove,
color: Color(
0xFF4B4B4,
),
),
),
)
],
)
],
),
),
)
]),
)
],
),
),
);```
**Please let me know if I'm doing something wrong here I've wrapped this custom scroll view with a single child scroll view, even but I'm getting a multiple errors on that approach. I just need the stack elements to get screwed just like a column wrapped with a single child scroll view. **
**I've tried using single child scroll view, but it was giving me an error of infinite size Search switched to another approach using the custom scroll view. I've wrapped my stack in it Under the sliver filled remaining widget But still my stack widget is not getting scrolled Just let me know what else can I do. I'm expecting a solution that helped me to scroll this stack widget just like a column wrapped under a single child scroll view. Just let me know if you need any other additional information to answer this question.**
I have remove some of your custom widgets in order for me to be able to test and debug, but the issue your having is with the
SliverFillRemainingwidget this widget will fill the rest of the screen or let's say occupy the full height of the screen then when you sethasScrollBodytotrue(by default is true anyway) you essentially tell the widget that fill my screen but there is a position of my child widget that is is scrollable so in your case you should have wrap stack withSingleChildScrollViewso that if stack has more height that the screen height it should scroll, look at the example below i have added a container with a 2x screen size height inside a stack thenso now it scroll as it should another approach you could just use
SliverToBoxAdapterbut this time there is no need of using theSingleChildScrollViewwidget since the scrolling will be taking care of byCustomScrollViewwidget here is an example of the codeso in both ways the the stack is scrollable, choose what suite the most. I hope it helps :D Kudos