How to make slider discrete?

问题:

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

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