Flutterexperts

The CupertinoSegmentedControl widget in Flutter shows widgets from a map in a horizontal list and makes an iOS-style portioned control bar. At the point when one choice in the segmented control is chosen, different choices in the divided control cease to be chosen.

This blog will explore the Cupertino Segmented Control In Flutter. We will see how to implement a demo program. We are going to learn about how we can utilize CupertinoSegmentedControl and how to customize the style of Cupertino Segmented Control using various properties in your flutter applications.

CupertinoSegmentedControl class – Cupertino library – Dart API
An iOS-style segmented control. Displays the widgets provided in the Map of children in a horizontal list. Used to…api. flutter.dev

Table Of Contents ::

Introduction

Constructor

Properties

Code Implement

Code File

Conclusion

---

---

Introduction:

Cupertino segmented control is the only ios style segmented control in a flutter. CupertinoSegmentedControl widget allows us to make a segmented control in ios style. It shows an even horizontal list of choices. We can choose a choice by tapping on it.

These choices are created utilizing a map (key-value pairs <String, widget>). The keys ought to be comparable for every one of the children on the map. We will utilize the keys to recognize the choice by the user. The values can be any widget and needn’t bother to be comparative. At the point when we select one choice, we can’t choose different choices in the segmented control. It implies we can’t choose more than each choice in time.

Demo Module ::

This demo video shows how to use a Cupertino segmented control in a flutter and shows how a Cupertino context menu will work in your flutter applications. It shows when the code successfully runs, then the user was tapping the button highlighted and shows the content. It will be shown on your device

Constructor:

To utilize CupertinoSegmentedControl, you need to call the constructor underneath:

To make a Cupertino segmented control in flutter we need to utilize CupertinoSegmentedControl class. Call the constructor of the class and give the required properties.

CupertinoSegmentedControl({
  Key? key,
  required this.children,
  required this.onValueChanged,
  this.groupValue,
  this.unselectedColor,
  this.selectedColor, 
  this.borderColor,
  this.pressedColor,
  this.padding,
})

The constructor has two required properties children & onValueChanged. The children should be of type map.

Properties:

There are some properties of CupertinoSegmentedControl are:

• > children — This property is used for identifying keys and corresponding widget values in the segmented control. The map must have more than one entry. This attribute must be an ordered [Map] such as a [LinkedHashMap].
• > onValueChanged — This property is used to take a callback function as a value. It will invoke every time the user selects an option. We can get the selected value inside this function. Based on the value we will update the UI.
• > groupValue — This property is used to this indicates the option that is selected currently. It should be one of the keys in the map or null. If null no option is selected. If it is key then it will select the option for that key.
• > selectedColor — This property is utilized to fill the background of the chosen widget and as the text color of unselected widgets. Defaults to [CupertinoTheme]’s ‘primary color’ if null.
• > unselectedColor — This property is utilized to fill the backgrounds of unselected widgets and as the text color of the selected widget. Defaults to [CupertinoTheme]’s `primaryContrastingColor` if null.
• > borderColor — This property is utilized for the color used as the border around each widget. Defaults to [CupertinoTheme]’s `primary color` if null.
• > pressedColor — This property is utilized to the color used to fill the background of the widget the user is temporarily interacting with through a long press or drag. Defaults to the selected color at 20% opacity if null.
• > padding — This property is utilized by the CupertinoSegmentedControl and will be placed inside this padding. Defaults to EdgeInsets.symmetric(horizontal: 16.0).

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.

In the main.dart file. We will create a new class MyHomePage(). In this class, first, we will declare an integer variable that will hold the selected key. the selected value is equal to zero.

int selectedValue = 0;

We will show segmented control with three choices. We will show the comparing picture when the choice is chosen. For this, we will require a map for children and a list for holding pictures.

Map<int, Widget> children = <int, Widget>{
  0: const Text("Flutter"),
  1: const Text("NodeJS"),
  2: const Text("React Native"),
};

Now we will declare the List with the path to images. Please download three images for flutter, node js, and react native. Name them as Flutter, NodeJS, and React Native. Add the images to the assets folder.

List<String> images = [
  "assets/img1.png",
  "assets/img2.png",
  "assets/img3.png"
];

In the body part, we will add the column widget. In this widget, we will add the Container widget. In this widget, we will add the CupertinoSegmentedControl widget. We will add children, onValueChanged, and add some properties.

Column(
  children: [
    Container(
      width: double.infinity,
      child: CupertinoSegmentedControl<int>(
        children: children,
        onValueChanged: (value) {
          selectedValue = value;
          setState(() {});
        },
        selectedColor: CupertinoColors.black,
        unselectedColor: CupertinoColors.white,
        borderColor: CupertinoColors.inactiveGray,
        pressedColor: CupertinoColors.inactiveGray,
        groupValue: selectedValue,
      ),
    ),
    Container(
      height: MediaQuery.of(context).size.height * 0.60,
      width: double.infinity,
      child: Image.asset(images[selectedValue], fit: BoxFit.contain),
    )
  ],
),

Also, we will add one more container widget with height and width for the images.

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_segmented_control_demo/splash_screen.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false,
      home: const Splash(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  _MyHomePageState createState() {
    return _MyHomePageState();
  }
}

class _MyHomePageState extends State<MyHomePage> {
  int selectedValue = 0;
  Map<int, Widget> children = <int, Widget>{
    0: const Text("Flutter"),
    1: const Text("NodeJS "),
    2: const Text("React Native"),
  };

  List<String> images = [
    "assets/img1.png",
    "assets/img2.png",
    "assets/img3.png"
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xffFFFFFF),
      appBar: AppBar(
        title: const Text(
          "Flutter Cupertino Segmented Control Demo",
          style: TextStyle(fontSize: 19),
        ),
        centerTitle: true,
        automaticallyImplyLeading: false,
        backgroundColor: Colors.teal,
      ),
      body: Material(
        child: Container(
          margin: const EdgeInsets.only(top: 80, left: 20, right: 20),
          child: Column(
            children: [
              Container(
                width: double.infinity,
                child: CupertinoSegmentedControl<int>(
                  children: children,
                  onValueChanged: (value) {
                    selectedValue = value;
                    setState(() {});
                  },
                  selectedColor: CupertinoColors.black,
                  unselectedColor: CupertinoColors.white,
                  borderColor: CupertinoColors.inactiveGray,
                  pressedColor: CupertinoColors.inactiveGray,
                  groupValue: selectedValue,
                ),
              ),
              Container(
                height: MediaQuery.of(context).size.height * 0.60,
                width: double.infinity,
                child: Image.asset(images[selectedValue], fit: BoxFit.contain),
              )
            ],
          ),
        ),
      ),
    );
  }
}

---

Conclusion:

In the article, I have explained Cupertino Segmented Control’s basic structure in a flutter; you can modify this code according to your choice. This was a small introduction to Cupertino 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 Cupertino Segmented Control in your flutter projects. We will show you what the Introduction is. Make a demo program for working with Cupertino Segmented Control and you’ve learned how to create & use Cupertino Segmented Control in your flutter applications. 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! For any flutter-related queries, you can connect with us on Facebook, GitHub, Twitter, and LinkedIn.

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.

---