Adding a Scrollbar to a scrollable widget (Flutter Tutorials)

Dev Bros
2 min readAug 26, 2020

--

Want a simple way to add a scrollbar to any scrollable widget? ScrollBar makes that very easy to implement!

Watch the tutorial here!

For this tutorial we are going to start off with a ListView (please keep in mind you can use any scrollable widget) like this:

Now all you have to do is wrap the ListView in a ScrollBar widget and this will add a scroll bar to your lists:

That was pretty easy! However this basic implementation only gives us a scrollbar that is visible while scrolling. If we want it to be always visible then we pass the value true to the isAlwaysShown argument:

You will notice that just passing this argument will cause an error and that is because we are missing a ScrollController. Adding a ScrollController consists of a few steps:
- Creating a ScrollController variable
- Instantiating the controller in our initState method
- Disposing of the controller in our dispose method
- Linking the controller to the ScrollBar and the ListView
Here in the full code implementation you can see these implemented:

Great job! You are now a certified pro in using ScrollBars. If you like us enough go check out some of our other content!

About the Author

Dev Bros is a Mobile Application Development company specializing in Flutter owned by Wyatt Hoffman and Morgan Hunt who currently work as Software Engineers developing Flutter apps.

Check out more of Dev Bros content here:
Twitter
Codepen
Facebook
GitHub
YouTube
LinkedIn
Instagram

--

--