CupertinoSegmentedControl — All Cupertino Widgets

Tomic Riedel
2 min readNov 22, 2022

In this series, we look at the whole Cupertino package of Flutter. You will get to know every widget, important class, and 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!

Happy reading!

CupertinoSegmentedControl

CupertinoSegmentedControl is an iOS-styled widget that displays the widgets provided in a Map of children in a horizontal list. According to the Flutter documentation, it is “used to select between a number of mutually exclusive options”.

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 ValueChanged<T>.

Okay, now we want to customize our widget a bit.

You can set the color of the selected element with selectedColor. Of course, you can set the color of the unselected ones with unselectedColor. When the user temporarily interacts with the widget, the area where he clicks will be highlighted with the pressedColor. And the last color we want to discuss is borderColor.

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 CupertinoSegmentedControl 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!

--

--

Flutter Supabase — The Complete Crash Course

5 min read

Nov 4, 2022

The ultimate guide to testing in Flutter

5 min read

Aug 19, 2022

Flutter Sembast — The Complete Crash Course

3 min read

Aug 20, 2022

Flutter Isar Database — Part 6 — Transactions

3 min read

Aug 17, 2022

Fluter GoRouter — The Complete Crash Course

3 min read

Aug 20, 2022

Flutter Isar Database — part 5 — Advanced Querying

5 min read

Aug 16, 2022

Flutter logger — The complete crash course

4 min read

Aug 18, 2022

Flutter Isar Database — part 4 — Filter data

4 min read

Aug 16, 2022

Flutter FVM — Boost your Flutter productivity by 100%

4 min read

Aug 19, 2022

Flutter Dio explained — The complete crash course

3 min read

Aug 17, 2022

Tomic Riedel

Flutter, Dart & Appwrite Developer | Livelong learner | Happy about sharing my knowledge