ScrollController is must for long ListView or CustomScrollView. It defines where to jump and how to jump. It helps you to go a certain section in your UI.
Previously we have worked with CustomScrollView, where I explained why we need to CustomScrollView. Now we know that, CustomScrollView and ScrollControll should work together, to make a scroll view smooth and correct.
In this example I have created an instance of ScrollController name myScrollController. From this instance we would be able to get the various properties of scroll controller. The very useful properties are listed below.
ScrollController properties
offset
Offset refers to the pixel position of your list length. Flutter framework takes the list and automitically calculates the length of the list for you based on your font size and other ui properties. It's the highest position. If you add more items to the list, the list length in pixel value will increase. It will return value double if you print on the terminal.
In general myScrollController.offset and myScrollController.position.maxScrollExtent almost refer to the same pixel position.
maxScrollExtent & minScrollExtent
myScrollController.position.maxScrollExtent always refers to the bottom of a list. It means go the bottom of a list and show on the UI.
myScrollController.position.minScrollExtent does the opposite. It goes to the top of the list, which would be the lowest index of list. So with myScrollController.position.minScrollExtent you will see the top of the item from your list on the UI.
So with maxScrollExtent, you will have the hightest value in pixels from your list which corresponds to the UI pixels values.
With minScrollExtent, you will have the lowest value in pixels and it would be 0.0. Even if you get 0.0, it might not be positioned at 0.0 pixels values of your UI. So 0.0 means list bottom positions in pixel values.
For example if you use padding or margin for attached scroll view widget, minScrollExtent won't be at 0.0 position. So actual UI position for the list first item might not be at the very bottom of your UI.
position
Returns the attached ScrollPosition, from which the actual scroll offset of the ScrollView can be obtained. You can get maxScrollPosition and minScrollPosition from position property.
results
pixels
In general myScrollController.position.pixels and myScrollController.offset are the same exact value.
ScrollController use
You should do conditional check if your widget has a ScrollController instance assigned or not. If there’s a ScrollController for your widget, then that widget would be responsive to maxScrollExtent and minScrollExtent.
if(myScrollController.hasClients){
myScrollController.animateTo(
myScrollController.position.maxScrollExtent,
duration: const Duration(milliseconds: 300), curve: Curves.easeOut);
}hasClients is the object that helps to check if the scroll controller is using any widget or not.
Display order
When you use ScrollController with CustomScrollView, then you need to be careful about display order. Because in CustomScrollView there’s a property called reverse. It influences the display order.
If you use the default property value (which is false) then, with maxScrollExtent, you will see the last item in the list at the bottom of your screen when you start scrolling.
Remember maxScrollExtent is only responsible for jumping to the last item of your list, and show on the UI. Whether, it’s the top of the UI or bottom of the UI, it’s up reverse property of CustomScrollView.
minScrollExtent does the opposite. It also changes display position when you change reverse:true in CustomScrollView.
Scroll listener
We need to add a listener to ScrollController to know how far we are in the scrolling. The benefit of knowing this is that, we would be able to load more data from repository and jump to a certain position in the screen.
To add a listener we just simply call myScrollController.addListener({}).
myScrollController.addListener(() {
if((myScrollController.offset+10)>(myScrollController.position.maxScrollExtent)){
if(isLoadmore){
state.isloading.value = true;
//to stop unnecessary request to firebase
isLoadmore = false;
asyncLoadMoreData();
print("...loading...");
}
}
});In the listener we listen to scroll position using offset and maxScrollExtent. If we are beyond the visible screen then we load more data from the server.
