ScrollablePositionedList: A Flutter List with Item Scrolling and Visibility Tracking

Published on by Flutter News Hub

ScrollablePositionedList: A Flutter List with Item Scrolling and Visibility Tracking

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.

Flutter News Hub