Get the current sliver that is visible/scrolled inside a Flutter CustomScrollView - flutter

Question

How do I get the current sliver item that is visible/scrolled inside a Flutter CustomScrollView?
My CustomScrollView has multiple SliverGrid and SliverToBoxAdapter widgets inside. I would like to know which `SliverGrid' is currently visible (scrolled to).
child: CustomScrollView(
slivers: <Widget>[
SliverToBoxAdapter(),
SliverGrid(),
SliverToBoxAdapter(),
SliverGrid(),
...
],
)
I would also like to know the scroll position inside the currently visible SliverGrid.

Answer 1

you can try this to get the current visible widget, inview_notifier_list:
import 'package:flutter/material.dart';
import 'package:inview_notifier_list/inview_notifier_list.dart';
import 'box.dart';
class CSVExample extends StatelessWidget {
final ScrollController? scrollController;
final IsInViewPortCondition? inViewPortCondition;
const CSVExample({Key? key, this.scrollController, this.inViewPortCondition})
: super(key: key);
#override
Widget build(BuildContext context) {
final IsInViewPortCondition condition = inViewPortCondition ??
(double deltaTop, double deltaBottom, double vpHeight) {
return deltaTop < (0.5 * vpHeight) && deltaBottom > (0.5 * vpHeight);
};
return Stack(
fit: StackFit.expand,
children: <Widget>[
InViewNotifierCustomScrollView(
initialInViewIds: ['grid3', 'grid4', 'grid5'],
isInViewPortCondition: condition,
contextCacheCount: 35,
controller: scrollController,
slivers: <Widget>[
SliverPadding(
padding: EdgeInsets.only(top: 50.0, bottom: 50.0),
sliver: SliverGrid(
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 200.0,
mainAxisSpacing: 10.0,
crossAxisSpacing: 10.0,
childAspectRatio: 1.0,
),
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Box(
id: 'grid$index',
height: 200.0,
);
},
childCount: 20,
),
),
),
SliverPadding(
padding: EdgeInsets.only(top: 50.0, bottom: 50.0),
sliver: SliverList(
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Container(
width: double.infinity,
height: 300.0,
color: Colors.blueGrey,
alignment: Alignment.center,
margin: EdgeInsets.symmetric(vertical: 50.0),
child: Box(id: 'list$index'),
);
},
childCount: 3,
),
),
),
SliverGrid(
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 200.0,
mainAxisSpacing: 10.0,
crossAxisSpacing: 10.0,
childAspectRatio: 1.0,
),
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Box(
id: '2nd-grid$index',
height: 200.0,
);
},
childCount: 10,
),
),
],
),
IgnorePointer(
ignoring: true,
child: Align(
alignment: Alignment.center,
child: Container(
// height: 200.0,
// color: Colors.redAccent.withOpacity(0.2),
height: 1.0,
color: Colors.redAccent,
),
),
),
],
);
}
}