In this series, we look at the whole Cupertino package of Flutter. You will get to know every widget, crucial classes, and much more in this series. All the articles will be less than 2 minutes long, so you can read them every time :) In addition to that, they will be effortless to understand, following the motto
Make everything as simple as possible, but not simpler. ~ Albert Einstein
If you want to check out the other articles of this series, check out this list. Let’s get started!
CupertinoScrollbar is the iOS-styled widget for the normal
Scrollbar widget, that indicates the current position in a scrollable list. It is quite easy to use, but it has sooo many customization features. Today, we will take a look at
CupertinoScrollbar and how to use it!
CupertinoScrollbar, wrap your scrollable widget with the
CupertinoScrollbar widget. Make sure your scrollable (list) is finite, otherwise the scrollbar won’t know where it currently is inside of the scrollable widget. In that case, the scrollbar won’t be shown. And done.
That’s it, thanks for reading!
Okay okay, just kidding. You are now ready to use
CupertinoScrollbar in theory. But of course, we want to customize our newly added widget a little bit. We won’t take a look at all the customization options, but a few.
You can specify a
ScrollController for the scrollbar with the
Controller property. But okay, that’s not something the user will see.
By default, the scrollbar is not always visible, just when you hover or when you scroll. If you want to make it always visible, set
You can customize the thumb with
shape of type
If you also want to show the track (the bar along the thumb moves), use
trackVisibility. You can customize the track with
The last important property is
interactive of type
bool. This property indicates whether the Scrollbar should be interactive and respond to dragging on the thumb or tapping in the track area.
There are some more customization options, but I think we’ve already discovered a lot of them. But if you want to get to know the other ones, check out the Flutter API Docs.
But for now, let’s take a look at an example:
Further reading & Conclusion
In this article, you have learned how to use the CupertinoScrollbar.
Did you know that there are great packages that enhance your development enormously? For example Freezed, Isar, or Flutter Hooks. If you want to learn about these great packages, I have entire tutorials about them. Check them out here.
In the following few articles, I will introduce more Cupertino widgets, essential classes, and more stuff. If you don’t want to miss this, I recommend you follow me!
Thanks for reading, have a nice day!