CupertinoScrollbar — All Cupertino Widgets

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!

Happy reading!

CupertinoScrollbar

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!

To use 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 thumbVisibility to true.

You can customize the thumb with thumbColor, shape of type OutlinedBorder, radius and radiusWhileDragging.

If you also want to show the track (the bar along the thumb moves), use trackVisibility. You can customize the track with trackBordercolor, trackColor and trackRadius.

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!