How to put numbers in top of Flutter Slider

user_9938255 0
Viewed 7802

I need to make an slider, that slider works perfectly, it has its divisions, but the thing that I need to do is set numbers in each division, I mean, if the slider has 3 divisions, set numbers, 1, 2, 3, something kind of:

   1   2   3
---|---|---|---

Is there a way to do that?

The code that I am using is this one:

Slider(
  value: _place.value,
  min: 0.0,
  max: 10.0,
  divisions: 10,
  onChangeStart: (double value) {
    print('Start value is ' + value.toString());
  },
  onChangeEnd: (double value) {
    print('Finish value is ' + value.toString());
  },
  onChanged: (double value) {
    if (vm.isRatingPlace) {
      setState(() {
        _place.value = value;
      });
    }
  },
  activeColor: HeatMapColors.getOnFireColor(_place.value),
  inactiveColor: Colors.black45,
))
dart flutter
1 Answers

You could use a Column and draw the values at the top, check this example :

     double value = 0.0;

      @override
      Widget build(BuildContext context) {
        return Scaffold(
            body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 15.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: List.generate(10, (index) => Text("$index")),
              ),
            ),
            Slider(
              value: value,
              min: 0.0,
              max: 10.0,
              divisions: 10,
              onChangeStart: (double value) {
                print('Start value is ' + value.toString());
              },
              onChangeEnd: (double value) {
                print('Finish value is ' + value.toString());
              },
              onChanged: (double newValue) {
                setState(() {
                  value = newValue;
                });
              },
              activeColor: Colors.blue,
              inactiveColor: Colors.black45,
            ),
          ],
        ));
      }
user_6662210
Related