CupertinoSegmentUsercontrol – A Flutter Widget you must know for sure

Does anyone remember the old messenger app in IOS where you can find the below tab-bar functionality?

Not so long ago, I was trying to accomplish something similar. The first thought was to recreate it using container and row widgets. Before jumping into action, I wanted to explore other means of recreation and that’s when I found “Cupertinosegmentusercontrol“. Following this might reduce the hassle of writing the widget from scratch.

This widget comes under the Cupertino Library, an IOS UI library in flutter.

Let’s get into detail !!!

Introduction to Cupertinosegmentusercontrol:

The objective is to display the widgets given in the Map of the children in a horizontal list (Tab bar). It allows the users to navigate between various different alternatives by tapping inside the segmented control. A segmented control can include any widget as one of its qualities in its map of children.

You can also refer to the Cupertino Segmented Control Widget and it’s properties in flutter documentation — CupertinoSegmentedControl class — Cupertino library — Dart API

You can also find details regarding the properties of this particular widget in the documentation.

The standard constructors for this segmentusercontrol are as follows :

CupertinoSegmentedControl({Key? key, required Map children, required ValueChanged onValueChanged, T? groupValue, Color? unselectedColor, Color? selectedColor, Color? borderColor, Color? pressedColor, EdgeInsetsGeometry? padding}

While observing the standard constructors for this widget, it’s noted that the children and onValuedChanged are mandatory for this widget to function.

Now let’s dive into the implementation part !!

In this example, the CupertinoSegmentedControl with an enum type is being executed.

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

Since there are live changes happening on the screen, it’s only possible to achieve this by creating a stateful widget.

It’s only logical if any one of the tabs is on select while opening the screen, thus we have to set a particular tab as selected or open by default.

The segment control can feature any widgets as on the values in its map of children. We can globally declare the tab option’s name as an enum before declaring the main function. The ordering of the keys or options will be determining the order of the widgets in the segment control.

import 'package:flutter/material.dart';

enum Opt { Option1, Option2 }

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Flutter Segment Control',
      home: MyHomePage(),
    );
  }
}

When there’s a change in the state of the segment control, the widget would call the onValuedChanged callback. The corresponding map key associated with the newly selected widget is returned in the onValueChanged callback.

This widget primarily relies on the onValueChanged callback and rebuilds the segment control with the new groupValue to get the options updated according to the selection.

In this case, we have taken _segmentedSegment as the selected option.

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Opt _SegmentedSegment = Opt.Option1;

  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
        backgroundColor: Colors.grey,
        navigationBar: CupertinoNavigationBar(
          middle: CupertinoSegmentedControl<Opt>(
            selectedColor: Colors.lightBlue,
            padding: const EdgeInsets.symmetric(horizontal: 1, vertical: 1),
            groupValue: _SegmentedSegment,
            onValueChanged: (Opt value) {
              setState(() {
                _SegmentedSegment = value;
              });
            },

From the above code snippet, it can be seen that Option1 has been set to _SegmentSegment and the value is being passed to in onValueChanged under setstate function as live updates in the screen in required ( The screen gets rebuilt in the setstate operation).

Next comes the children widget where we decide what widget is to be displayed according to the selection being made.

children: <Opt, Widget>{
              Opt.Option1: Padding(
                padding: EdgeInsets.symmetric(horizontal: 60, vertical: 11),
                child: Text(
                  "Option1",
                  style: TextStyle(
                      color: _SegmentedSegment == Opt.Option1
                          ? Colors.white
                          : Colors.black,
                      fontSize: 13),
                ),
              ),
              Opt.Option2: Text(
                "Option2",
                style: TextStyle(
                    color: _SegmentedSegment == Opt.Option2
                        ? Colors.white
                        : Colors.black,
                    fontSize: 13),
              ),
            },

As seen in the above code snippet, a child widget is required within the “CupertinoPageScaffold” it doesn’t function without it

In this example, we have asked dart to display Option1 else Option 2.

Final Output Screen

You can find the full code in this github repo : https://github.com/Santosh611/CupertinoSegmentcontrol-.git

Conclusion :

In this writing, I have walked you through the basic structure of the “Cupertino Sliding Control in flutter. You can modify the code according to your needs.

I have tried my best to explain and share the things I have learned with other aspiring coders out there.

Thanks for reading my article and I hope you found it helpful.