Flutterexperts

A segmented control is a direct arrangement of at least two fragments that function as a totally unrelated button. Inside the control, all sections are equivalent in width. Like buttons, segments can contain text or pictures. Segmented controls are frequently used to show various perspectives.

In this blog, we will explore the Cupertino Sliding Segmented Control In Flutter. We will see how to implement a Cupertino sliding segmented control demo program and show how to create it in your flutter applications.

CupertinoSlidingSegmentedControl class – cupertino library – Dart API
An iOS 13 style segmented control. Displays the widgets provided in the Map of children in a horizontal list. It allows…api. flutter.dev

Table Of Contents::

Introduction

Constructor

Properties

Code Implement

Code File

Conclusion

---

---

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.
• > groupValue: 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.
• > backgroundColor: 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 identify 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.

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.

---

Feel free to connect with us:
And read more articles from FlutterDevs.com.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.

---