Create a Segmented Control Widget with slider button - Flutter

user_11187075 0
Viewed 13285

How do I create something similar to this?:

Demo :
Demo

I know flutter has

CupertinoSegmentedControl()

But this creates something similar to tabs, nothing that slides like something a Switch with a button inside.

flutter-layout flutter segment button controls
1 Answers

Best thing I have found is the CupertinoSlidingSegmentedControl():

class _ViewState extends State<View> {
  int segmentedControlGroupValue = 0;
  final Map<int, Widget> myTabs = const <int, Widget>{
    0: Text("Item 1"),
    1: Text("Item 2")
  };

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CupertinoSlidingSegmentedControl(
          groupValue: segmentedControlGroupValue,
          children: myTabs,
          onValueChanged: (i) {
            setState(() {
              segmentedControlGroupValue = i;
            });
          }),
    );
  }
}

Hope this helps. See the docs here.

user_101935630
Related