Issue
[Initial Postion][1]
[Scrolling from SliverList side][2]
[Scrolling from SliverAppBar side][3]
class ProductScreen extends StatelessWidget {
static const routeName = "/product-screen";
@override
Widget build(BuildContext context) {
final _subCategory = Provider.of<SubCategoryProvider>(
context,
listen: false,
);
final _mediaQuery = MediaQuery.of(context);
return Scaffold(
body: SafeArea(
bottom: true,
top: true,
left: true,
right: true,
child: CustomScrollView(
slivers: <Widget>[
SliverAppBar(
expandedHeight: 200.0,
pinned: true,
flexibleSpace: FlexibleSpaceBar(
title: Text("${_subCategory.currentSubCategoryName()}"),
background: Container(
margin: const EdgeInsets.only(
top: 4,
bottom: 50.0,
),
child: Image.asset(
'asset/images/grocery.jpeg',
),
),
),
),
SliverList(
delegate: SliverChildListDelegate(
[
Column(
children: <Widget>[
Container(
height: _mediaQuery.size.height - kToolbarHeight,
color: Color.fromARGB(0xff, 0xff, 0xcd, 0x3c),
child: ListView.builder(
physics: BouncingScrollPhysics(),
itemCount: _subCategory.differentProductCount(),
itemBuilder: (ctx, pdIndex) {
return Column(
children: <Widget>[
Container(
height: 30.0,
margin:
const EdgeInsets.symmetric(vertical: 5.0),
decoration: BoxDecoration(
border: Border.all(
width: 1.0,
color: Colors.black,
),
borderRadius: BorderRadius.circular(20.0),
),
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: <Widget>[
Padding(
padding:
const EdgeInsets.only(left: 8.0),
child: Text(
"${_subCategory.currentProductName(pdIndex)}",
style: TextStyle(
fontSize: 18.0,
fontWeight: FontWeight.bold,
),
),
),
Icon(Icons.arrow_drop_down, size: 30.0),
],
),
),
Container(
height: 270.0 *
_subCategory
.differentCompanyCount(pdIndex),
child: ListView.builder(
physics: ClampingScrollPhysics(),
itemCount: _subCategory
.differentCompanyCount(pdIndex),
itemBuilder: (ctx, cyIndex) {
return Column(
children: <Widget>[
Container(
height: 250.0,
margin: const EdgeInsets.only(
bottom: 20.0),
color: cyIndex.isEven
? Colors.green
: Colors.pink),
],
);
},
)),
],
);
},
),
),
],
),
],
),
),
],
),
),
);
}
}
Sliver AppBar has its different scroll and SliverList has its own scroll.
If I try to scroll from sliver appbar then only both scrolls but if I scroll from the sliver list only sliver list scrolls and sliver appbar has its full expanded height.
I had tried settings physics to remove the inner scrolling but still, there are two different scrolling
Solution
The problem is you are creating a Listview.builder inside a SliverList, so it looks like a nested scroll, ignore the column and ListView.builder and just use SliverChildBuilderDelegate to create the items on demand
SliverList(
delegate: SliverChildBuilderDelegate(
(BuildContext context, int pdIndex) {
return Column(
children: [
//... The children inside the column of ListView.builder
]
);
}
childCount: _subCategory.differentProductCount(),
),
),
And for the color of the Container and Bouncing physics you could add those to the Scaffold backgroundColor and CustomScrollView physics respectively.
return Scaffold(
backgroundColor: Color.fromARGB(0xff, 0xff, 0xcd, 0x3c),
body: SafeArea( //bottom, top, left and right are true by default so no need to add them
child: CustomScrollView(
physics: BouncingScrollPhysics(),
slivers: [
...
]
)
)
);
Answered By – EdwynZN
Answer Checked By – Clifford M. (FlutterFixes Volunteer)