DoYouEvenFlutter? [EP.1] Scroll to Element in list
The problem of making certain element visible in a long list is very common. During my beginnings in Flutter, I didn’t find a good solution so I moved on to other, more fun stuff. Recently I had to revisit the problem and the solution came immediately.I can talk about two different approaches to this problem.
1.ScrollController
You can scroll to a certain element using a scroll controller. The scroll action itself needs to be wrapped in addPostFrameCallback because only when we have a list we can proceed with working with it.
Want to read this story later? Save it in Journal.
As you can see in line 5, I’m animating to a certain list offset. I know that each row in my list has a fixed height of 60px. Because of that, I can calculate the position that I want the list to be. In this case, I want the 70th row to be visible for the user.
This particular method, of course, comes with some disadvantages.
The most important one is quite obvious. Every row HAS to be 60px in height. The animation can be a nice addition or unwanted feature.
NOTE: Please remeber to always dispose your controllers 😉
The result is a very simple list. In the example below, the floating button “Roll” is animating to a random element in the list.
2.GlobalKey(s)
My preferred method of scrolling to certain elements involves a more object-oriented solution. Usually, when I need to display some data in a list, I create an object that represents my row. While doing that I do something like:
Now I have a unique GlobalKey that I can do magic things with. For this article, I want to use to make sure the element is visible on the users’ screen. And the solution in quite similar to the scroll controller. I need to wrap it on addPostFrameCallback and I’m good to go.
This time the only thing I need to do is to get a propper row object. Next it’s a matter of passing its’ the context into Scrollable.ensureVisible().
This, for me, is a much cleaner way to scroll to a certain row. Moreover, elements DON’T HAVE TO BE the SAME SIZE. I used this method to display an element previously selected by the user. No scroll animation, no need to worry about the order od the elements, just: “PLEASE MAKE SURE MY USER SEES HIS SELECTED ELEMENT”.
The result of our GlobalKey shenanigans looks like:
If you want you can check the full working example here.
The code has some other perks that I will be describing in future episodes. If you have some questions, write them here in the comment section or DM me on Twitter.
Cheers,
Luke
📝 Save this story in Journal.
👩💻 Wake up every Sunday morning to the week’s most noteworthy stories in Tech waiting in your inbox. Read the Noteworthy in Tech newsletter.
