Flutter Cupertino Segmented Control Example

This article explains you how to implement flutter cupertino segmented control in flutter application for both android and iOS platforms. You can also check out flutter cupertino widgets related articles.

In this flutter example, We are creating Sliding Segmented Control to show various components in flutter app. Each sliding segment has same width. We can also add image in segmented control same as text widget. Whenever we will slide control to other segment, it will be highlighted. We can set background color of highlighted cupertino segment. We can also click on sliding segment to select it.

Cupertino Sliding Segmented Control widget has many properties to customize UI. We can add any widget as child in cupertino sliding control using children property. We can set background color of whole sliding segment using backgroundColor property. We can also set highlight color of cupertino segment when user selects it using thumbColor property.

groupValue attribute is used to identify each cupertino segment in sliding control widget. We can add our custom widgets to display in flutter segmented control using children property. We can customize segment text UI in this custom widget. onValueChanged callback is used to detect when new segment is selected. children and onValueChanged properties are required in CupertinoSlidingSegmentedControl widget.

 

Customize Sliding Segmented Control UI

Widget mySegmentWidget(String text) {
return Container(
child: Text(
text,
style: TextStyle(fontSize: 25, color: Colors.black),
),
);
}
 
 

Flutter Cupertino Segmented Control

class MySegmentedControlScreen extends StatefulWidget {
@override
_MySegmentedControlScreenState createState() => _MySegmentedControlScreenState();
}

class _MySegmentedControlScreenState extends State<MySegmentedControlScreen> {

int groupValue = 0;

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(‘Flutter Segmented Control Sample’),
),
body: Container(
padding: EdgeInsets.all(12),
alignment: Alignment.center,
color: Colors.grey,
child: CupertinoSlidingSegmentedControl<int>(
padding: EdgeInsets.all(10),
thumbColor: CupertinoColors.activeOrange,
backgroundColor: CupertinoColors.white,
groupValue: groupValue,
children: {
0: mySegmentWidget(“Cricket”),
1: mySegmentWidget(“Soccer”),
2: mySegmentWidget(“Tennis”),
},
onValueChanged: (value) {
setState(() {
groupValue = value;
});
},
),
),
);
}
}

 
 
flutter cupertino segmented control
 

3 thoughts on “Flutter Cupertino Segmented Control Example

Leave a Reply