Search code examples
flutterbuttonflutter-layoutcontrolssegment

Create a Segmented Control Widget with slider button - Flutter


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.


Solution

  • 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.