I'm working on a page, where i'm using CustomScrollView to get a specific kind of scrolling behavior. But I have a hard time to figure out, why the last row of widgets is getting trimmed.
I had tried to change the physics of the GridView to ScrollPhysics, where the widget is not getting trimmed, but this is causing a conflict between the two scrolling widgets (CustomScrollView & gridview), which is giving a useless scrolling behavior.
So I changed the physics of the GridView to NeverScrollableScrollPhysics, which is causing the last row of widgets a trim. In this case the behavior of the scrolling is as desired.
Here is the structure of the code
- CustomScrollView
- Slivers
- Other Slivers
- SliverFillRemaining
- TabBarView
- GridView
- GridView
- TabBarView
- Slivers
Here is the SliverFillRemaining
SliverFillRemaining(
child: TabBarView(
controller: _tabController,
children: [
GridView.builder(
physics: NeverScrollableScrollPhysics(),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
childAspectRatio: 1,
mainAxisSpacing: 1.h,
mainAxisExtent: 100.h),
itemCount: tagsToShow.length,
itemBuilder: (context, index) {
return hashtagThumbnail(index, tagsToShow);
},
),
GridView.builder(
physics: NeverScrollableScrollPhysics(),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
),
itemCount: categories.length,
itemBuilder: (context, index) {
return Container(
child: categoryThumbnail(index, categories),
);
},
),
],
),
)
where hashtagThumbnail and categoryThumbnail are buttons.
Here is a GIF of the behavior:
If more information is needed, let me know
Thanks!