Flutter ScrollablePositionedList: Scroll to a position in listview

Photo by Glenn Carstens-Peters on Unsplash

Consider this User Story: Your user is reading a posts in a long list of posts. You want to ensure that the user’s position is saved when he gets back. And he can return to that position when he returns. I will share the ways we can do this features.

Old Aproach: Using ScrollController and ScrollNotification

new NotificationListener<ScrollUpdateNotification>(
child: new ListView(
controller: _scrollController,
children: ...
),
onNotification: (t) {
if (t is ScrollEndNotification) {
print(_scrollController.position.pixels);
}
},
),

Here we are listener to the position using NotificationListener. Also we can use _scrollController to control the Listview position. However we have to initialise the _scrollController in initState and listen to scroll position listeners. A more elegant solution is ScrollablePositionedList

A ScrollablePositionedList works much like the builder version of ListView except that the list can be scrolled or jumped to a specific item.

Example

A ScrollablePositionedList can be created with:

final ItemScrollController itemScrollController = ItemScrollController();
final ItemPositionsListener itemPositionsListener = ItemPositionsListener.create();
ScrollablePositionedList.builder(
itemCount: 500,
itemBuilder: (context, index) => Text('Item $index'),
itemScrollController: itemScrollController,
itemPositionsListener: itemPositionsListener,
);

One then can scroll to a particular item with:

itemScrollController.scrollTo(
index: 150,
duration: Duration(seconds: 2),
curve: Curves.easeInOutCubic);

or jump to a particular item with:

itemScrollController.jumpTo(index: 150);

So lets solve our User Story using above library:

Scroll to a position in the ListView when user visit the page again using initialScrollIndex. Here I have set the initialScrollIndex to 150

ScrollablePositionedList.builder(
itemCount: 500,
itemBuilder: (context, index) => Text('Item $index'),
initialScrollIndex: 150,
itemPositionsListener: itemPositionsListener,
);

Save the position of the listview when the user goes back. We will use builtin flutter widget WillPopScope. WillPopScope triggers a onWillPop the moment a user tries to go away from the present route. That is the place we will listen to the scroll position. Lets see this in code:

final ItemPositionsListener itemPositionsListener = ItemPositionsListener.create();@override
Widget build(BuildContext context) {
return WillPopScope(
onWillPop: () {
//save the last seen position
position = itemPositionsListener.itemPositions.value.first.index

//trigger leaving and use own data
Navigator.pop(context, false);
//we need to return a future
return Future.value(false);
},
child: ScrollablePositionedList.builder(
initialScrollIndex: 150,
itemPositionsListener: itemPositionsListener,
itemCount: 500,
itemBuilder: (context, index) => Text('Item $index'),
);

So using the itemPositionListener that has been attached we get the list of visible positions of the listview. We get only the first visible item from that listener.

See the whole code in gist

Thats it from me now. Thanks

--

--

--

Lead Android Developer, Flutter Lover

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

UiPath Custom Activities (Plus a Sentiment Analysis Activity)

GitHub CLI 1.0 is here!

My Journey to DevOps Mastery

Day 3: 20 Days of learning challenge

Notes About the iOS Accelerometer, Gyro, Magnetometer and Attitude

Bullet Proof your Java Program Part 1 — Incorrect use of Java Variables

The Liskov Substitution Principle Made Simple

The Engineering Manager’s Dilemma

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Nabil Mosharraf Hossain

Nabil Mosharraf Hossain

Lead Android Developer, Flutter Lover

More from Medium

A simple extension for currency format on string in Dart

#FlutterWithSakshi — Part 1

A tour with Dart syntax — Dart programming — Part 2

GetX Flutter | A Set of tutorials