ScrollablePositionedList: A Flutter List with Item Scrolling and Visibility Tracking
Published on by Flutter News Hub
ScrollablePositionedList is a Flutter widget that extends the functionality of ListView, enabling you to scroll to specific items in the list and determine which items are currently visible.
Usage
To create a ScrollablePositionedList, use the following constructor:
ScrollablePositionedList.builder( itemCount: 500, itemBuilder: (context, index) => Text('Item $index'), itemScrollController: itemScrollController, scrollOffsetController: scrollOffsetController, itemPositionsListener: itemPositionsListener, scrollOffsetListener: scrollOffsetListener, );
Item Scrolling
To scroll to a particular item, use the itemScrollController:
itemScrollController.scrollTo( index: 150, duration: Duration(seconds: 2), curve: Curves.easeInOutCubic, );
To jump to a specific item instantly, use jumpTo:
itemScrollController.jumpTo(index: 150);
Item Visibility Tracking
To monitor which items are visible on screen, use the itemPositionsListener:
itemPositionsListener.itemPositions.addListener(() => ...);
Experimental APIs (Subject to Changes)
Scroll Position Monitoring
You can track scroll position changes using:
scrollOffsetListener.changes.listen((event) => ...)
Scroll Position Modification
You can make relative scroll position changes in pixels using:
scrollOffsetController.animateScroll( offset: 100, duration: Duration(seconds: 1), );
Example
final ItemScrollController itemScrollController = ItemScrollController(); final ScrollOffsetController scrollOffsetController = ScrollOffsetController(); final ItemPositionsListener itemPositionsListener = ItemPositionsListener.create(); final ScrollOffsetListener scrollOffsetListener = ScrollOffsetListener.create(); ScrollablePositionedList.builder( itemCount: 500, itemBuilder: (context, index) => Text('Item $index'), itemScrollController: itemScrollController, scrollOffsetController: scrollOffsetController, itemPositionsListener: itemPositionsListener, scrollOffsetListener: scrollOffsetListener, );
Conclusion
ScrollablePositionedList provides enhanced scrolling and visibility tracking capabilities for Flutter lists, making it an ideal choice for applications requiring precise item navigation and visibility monitoring.