Cupertino Sliding Segmented Control In Flutter
By: Shaiq Khan
Tags: Flutter, Flutter Widget, Flutter App Development, Dart, iOS

Introduction:

Showcases the widgets gave in the Map of children in a horizontal list. It permits the client to choose between various totally unrelated alternatives, by tapping or hauling inside the segmented control.

A segmented control can include any Widget as one of the qualities in its Map of children. The sort T is the kind of the Map keys used to recognize every widget and figure out which widget is chosen.

Demo Module :

The above demo video shows how to create a Cupertino sliding segmented control in a flutter. It shows how the Cupertino sliding segmented control will work in your flutter applications. It shows when the code successfully runs, then the user sliding button, then the content was highlighted, and also the user was tapping content highlighted then button also move. It will be shown on your devices.

Constructor:

There are constructor of CupertinoSlidingSegmentedControl are:

CupertinoSlidingSegmentedControl({

Key? key,

required this.children,

required this.onValueChanged,

this.groupValue,

this.thumbColor = _kThumbColor,

this.padding = _kHorizontalItemPadding,

this.backgroundColor = CupertinoColors.tertiarySystemFill,

})

The constructor expects you to compulsory required children and onValueChanged.

Properties:

There are some properties of CupertinoSlidingSegmentedControl are:

> onValueChanged : This property is used to the callback that is called when a new option is tapped.

: This property is used to the callback that is called when a new option is tapped. > groupValue: This property is used to the identifier of the widget that is currently selected.

This property is used to the identifier of the widget that is currently selected. > thumbColor: This property is used to the color used to paint the interior of the thumb that appears behind the currently selected item.

This property is used to the color used to paint the interior of the thumb that appears behind the currently selected item. > backgroundColor : This property is used to the color used to paint the rounded rect behind the children and the separators.

: This property is used to the color used to paint the rounded rect behind the children and the separators. > children: This property is used to identifying keys and corresponding widget values in the segmented control.

How to implement code in dart file :

You need to implement it in your code respectively:

Create a new dart file called main.dart inside the lib folder.

First, we will create an integer variable groupvalue is equal to zero.

int? groupValue = 0;

In the body, we will add a Container widget. Inside, we will add alignment was center, add padding and its child property, add a CupertinoSlidingSegmentedControl() method. In this method, we will add a background color, thumbcolor, padding, group value, and its children, we will add the buildSegment() widget. We will deeply define below the code. Also, we will add the onValueChanged property. In this property, we will add setState() function. In this function, we will add groupValue is equal to the value.

Container(

alignment: Alignment.center,

padding: EdgeInsets.all(10),

child: CupertinoSlidingSegmentedControl<int>(

backgroundColor: CupertinoColors.white,

thumbColor: CupertinoColors.activeGreen,

padding: EdgeInsets.all(8),

groupValue: groupValue,

children: {

0: buildSegment("Flutter"),

1: buildSegment("React"),

2: buildSegment("Native"),

},

onValueChanged: (value){

setState(() {

groupValue = value;

});

},

),

),

We will define the buildSegment() widget

In this buildSegment widget, we will return a Container. Inside, we will add text with color, and fontSize.

Widget buildSegment(String text){

return Container(

child: Text(text,style: TextStyle(fontSize: 22,

color: Colors.black),),

);

}

When we run the application, we ought to get the screen’s output like the underneath screen capture.

Final Output

Code File:

import 'package:flutter/cupertino.dart';

import 'package:flutter/material.dart';

import 'package:flutter_cupertino_sliding_segmented_demo/splash_screen.dart';



void main() {

runApp(MyApp());

}



class MyApp extends StatelessWidget {

@override

Widget build(BuildContext context) {

return MaterialApp(

debugShowCheckedModeBanner: false,

theme:ThemeData.dark(),

home: Splash(),

);

}

}



class MyHomePage extends StatefulWidget {





@override

_MyHomePageState createState() => _MyHomePageState();

}



class _MyHomePageState extends State<MyHomePage> {

int? groupValue = 0;



@override

Widget build(BuildContext context) => Scaffold(

appBar: AppBar(

automaticallyImplyLeading: false,

title: Text("Cupertino Sliding Segmented Control Demo",

style: TextStyle(fontSize: 19),),

),

body: Container(

alignment: Alignment.center,

padding: EdgeInsets.all(10),

child: CupertinoSlidingSegmentedControl<int>(

backgroundColor: CupertinoColors.white,

thumbColor: CupertinoColors.activeGreen,

padding: EdgeInsets.all(8),

groupValue: groupValue,

children: {

0: buildSegment("Flutter"),

1: buildSegment("React"),

2: buildSegment("Native"),

},

onValueChanged: (value){

setState(() {

groupValue = value;

});

},

),

),

);



Widget buildSegment(String text){

return Container(

child: Text(text,style: TextStyle(fontSize: 22,

color: Colors.black),),

);

}



}

Conclusion:

In the article, I have explained the basic structure of the Cupertino Sliding Segmented Control in a flutter; you can modify this code according to your choice. This was a small introduction to Cupertino Sliding Segmented Control On User Interaction from my side, and it’s working using Flutter.

I hope this blog will provide you with sufficient information on Trying up the Cupertino Sliding Segmented Control in your flutter projects. We will show you what the Introduction is?. Show constructor and properties of the Cupertino Sliding Segmented Control. Make a demo program for working Cupertino Sliding Segmented Control and It shows when the code successfully runs, then the user sliding button, then the content was highlighted, and also the user was tapping content highlighted then button also move. So please try it.

❤ ❤ Thanks for reading this article ❤❤

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.