How to make slider discrete?

Question

How to make slider discrete look like image above in Flutter? slider discrete

Answer 1

Use the divisions property of the Slider widget to divide it into equal portions, then you have to put Text widgets under them:

 Container(
  width: MediaQuery.of(context).size.width,
  height: 200.0,
  child: Column(
   mainAxisAlignment: MainAxisAlignment.spaceEvenly,
   children: <Widget>[

     Slider(min: 0.0, max: 1.0, divisions: 9, value: 0.0, onChanged: null); // you have to provide an `onChanged` function to let slider pointer change place, and to execute other related actions.

     Row(
       mainAxisAlignment: MainAxisAlignment.spaceEvenly,

       children: <Widget>[
       Container(
         child: Text('6'),
       ),
       Container(
         child: Text('7'),
       ),
       Container(
         child: Text('8'),
       ),
       Container(
         child: Text('9'),
       ),
       Container(
         child: Text('10'),
       ),
       Container(
         child: Text('11'),
       ),
       Container(
         child: Text('12'),
       ),
       Container(
         child: Text('13'),
       ),
       Container(
         child: Text('14'),
       ),
     ]
   ),
 ]),
)

Answer 2

I am also new to Flutter, so bear with me, but when going to the docs for Slider here they give the example of using integer numbers by setting the label property to

    label: _currentSliderValue.round().toString(),

This rounds the current slider value to the next integer, which - from what I can tell - makes the values discrete.

I hope this helps.