Cupertino Segmented Control

The Cupertino Segmented Control widget lets us create a segmented control in ios style. It displays a horizontal list of options. We can select an option by tapping on it.


The Properties Panel can be used to customize the behavior of your Cupertino Segmented Control widget.

Adding Action

To perform any action on click of the Cupertino Segmented Control, add an Action in the widget. You can find the instructions on adding the Action here.

Styling the Cupertino Segmented Control

Changing Color of properties

To change the colors:
  • Select the Cupertino Segmented Control from the Tree Area.
  • Move to the Property Editor (on the right side of your screen) and navigate to the Fill.
  • Enter the color code or simply choose it either from Palette.

Selected Color

We will use this property to change the selected option color.

Unselected Color

We will use this property to change the unselected option’s color.

Pressed Color

To change the color of the option while pressed we will use this property. The color only appears while pressing the option. When we release our finger from the option it will disappear.

Border Color

To change the border of the Cupertino segmented control we will use this property.