The cause of

Recently I was developing a Web page with Flutter and came across an interface that needed to use the UISegmentedControl in iOS, something like this

With CupertinoSegmentedControl in Flutter, and then use directly.

I first developed the interface on the Flutter mobile, and everything appeared normal, just like this

But when I migrated the component to the Web side, something went wrong.

Not expecting a solution for a while, he decided to build his own wheel.

Let me show you the results

To optimize the

Original CupertinoSegmentedControl code redundancy, data processing is relatively trouble. You need to pass in a Map

parameter as the data source.
,>

Widget segmentControll(
      List titles, String groupValue, Function onValueChange) {
    TextStyle style = TextStyle(fontSize: 14);
    Color grey = Color.fromARGB(255.101.102.103);
    List<String> keys = ["a"."b"."c"."d"];
    Map<String, Widget> children = {};
    for (var i = 0; i < titles.length; i++) {
      String str = keys[i];
      Widget w = Container(
          alignment: Alignment.center,
          width: 56.0,
          height: 32,
          child: Text(
            titles[i],
            style: style,
          ));
      // Map item = {str:w};
      // children.add(item);
      children[str] = w;
    }
    return CupertinoSegmentedControl(
        onValueChanged: onValueChange,
        pressedColor: Colors.white,
        borderColor: grey,
        selectedColor: grey,
        groupValue: groupValue,
        children: children);
  }
Copy the code

My own wheel, just need a List

, much less code

Widget segmentControll(List titles, String groupValue, Function onValueChange) {
    Color grey = Color.fromARGB(255, 101, 102, 103);
    return HBSegmentedControl(titleList: titles,selectedColor: grey,onTap: (index){
      print(index);
    });
  }
Copy the code

integration

Address of the PUB

Pub. Flutter – IO. Cn/packages/hb…

Add this code to the pubspec.yaml file

Dependencies: hbsegmented_control: ^ 0.0.1Copy the code