Flutter Tip: Show scrollbar in ListView
ListView is a very common and very widely used widget in Flutter app development to show a list of items that a user can scroll.
Sometimes it becomes difficult for the user to decide whether the screen is scrollable or not because a user is not able to see the scrollbar on the screen.
Flutter ListView widget does not provide the inbuilt facility to show the scrollbar. But Flutter has a widget for that, which is the “Scrollbar()” widget.
The Scrollbar widget is very simple to use. Simply wrap your Listview() with the Scrollbar widget and you are done.
Check the below code snippet.
Now the problem with the above code is it will not show scrollbar until you interact with the Listview.
To make a scrollbar to be seen always you have to change your code a bit.
- add the property: isAlwaysShown: true to the Scrollbar widget
- Create a ScrollController object and pass it to Scrollbar and ListView as well.
Check the code snippet below.
Here is the gist of the complete code snippet: https://gist.github.com/dhuma1981/a2c25929e9065e7fbb37f2b2b75cb8f3
Bonus:
The best part of the Scrollbar() widget is it internally checks whether there is a scroll available or not. And if the scroll is not required the scrollbar will not be shown :)
If you like this share your love by a clap or applause. If you are facing any specific problem, share it in the comment and I will try my best to solve it.
Feel free to connect me over Twitter & LinkedIn.
