Search code examples
flutterdartflutter-layoutslider

How to have a slider in flutter with specific divisions


I want to have a slider in flutter with numbers like .5,1,2,3,4,5,10,15. How is this possible. I know that the divisions creates divisions in the slider that are linear. Is this possible to have my own numbers as each dot instead of a linear slider?

Slider(
  value: seconds,
  max: 3600,
  divisions:
      120, // this is where i want to have a not a linear division
  label: (seconds / 60.0).toStringAsFixed(1),
  onChanged: (double value) {
    setState(() {
      seconds = value;
    });
  },
),

Solution

  • I think the following snippet is what you are looking for:

    final List<double> values = [0.5, 1.0, 2.0, 3.0, 4.0, 5.0, 10.0, 15.0];
    int selectedIndex = 0;
    
    Slider(
       value: selectedIndex.toDouble(),
       min: 0,
       max: values.length - 1,
       divisions: values.length - 1,
       label: values[selectedIndex].toString(),
       onChanged: (double value) {
       setState(() {
            selectedIndex = value.toInt();
          });
       },
    ),
    

    This is the result:

    iPhone simulator screen recording