Create a Segmented Control Widget with slider button - Flutter

Question

How do I create something similar to this?:

Demo :

I know flutter has

CupertinoSegmentedControl()

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

Answer 1

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.

Answer 2

I would recommend going with CupertinoSlidingSegmentedControl Widget to get the output like above

CupertinoSlidingSegmentedControl Widget is an  iOS 13 style segmented control. It will displays the widgets provided in the Map of children in a horizontal list. Used to select between a number of mutually exclusive options. When one option in the segmented control is selected, the other options in the segmented control cease to be selected.

A segmented control may optionally be created with custom colors. The thumbColor, backgroundColor arguments can be used to override the segmented control's colors from its defaults.

Create elegant Segmented Controls, follow this code

import 'package:flutter/cupertino.dart';

 class SegmentedControl extends StatefulWidget {
   @override
   _SegmentedControlState createState() => _SegmentedControlState();
 }

class _SegmentedControlState extends State<SegmentedControl> {

  int segmentedControlValue = 0;

  Widget segmentedControl() {
    return Container(
      width: 300,
      child: CupertinoSlidingSegmentedControl(
          groupValue: segmentedControlValue,
          backgroundColor: Colors.blue.shade200,
          children: const <int, Widget>{
            0: Text('One'),
            1: Text('Two'),
            2: Text('Three')
          },
          onValueChanged: (value) {
            setState(() {
              segmentedControlValue = value;
            });
          }
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Segmented Control")),
      body: Padding(
        padding: const EdgeInsets.only(top: 30.0, left: 50),
        child: segmentedControl(),
      ),
    );
  }

}