Как сделать слайдер дискретным?

Question

Как сделать так, чтобы дискретный слайдер выглядел как изображение выше во Флаттере? Дискретный слайдер

Answer 1

Используйте свойство divisions виджета Slider , чтобы разделить его на равные части, тогда вы должны поместить под них Text виджеты:

 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'),
       ),
     ]
   ),
 ]),
)