In this series, we look at the whole Cupertino package of Flutter. You will get to know every widget, important 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 very easy 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!
CupertinoSlidingSegmentedControl is an iOS-styled segmented control widget, that has a small animation when switching between different values. It is very very similar to
CupertinoSegmentedControl, it just has 2–3 other properties (Read more about
As always, let’s first take a look at the properties.
The most important property is the
children property of type
Map<T, Widget>. You will ask yourself now, why is it a map? Well, I won’t explain it now, but when we look at a code example later, you will understand why it is a map :)
groupValue represents the currently segmented control. And of course, there is
onValueChanged of type
Okay, now we want to customize our widget a bit.
You can set the color of the thumb behind the currently selected element with
thumbColor. Of course, you can set the background color too, with
backgroundColor. Uhm yeah, that was all about colors….
Great, these were all the important properties you need to know. Oh, wait, no ;)
padding is missing :)
Let’s finally take a look at a code example:
Further reading & Conclusion
In this article, you have learned how to use the CupertinoSlidingSegmentedControl widget.
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!