This is how a Slider's animation normally looks like:

This is how a Slider looks when I try to add the value label:

This is the sample code:

          Slider(
              value: sliderValue,
              activeColor: color,
              min: 0.0,
              max: 100.0,
              divisions: 2000,    //TO COMMENT
              label: sliderValue.toStringAsFixed(2),    //TO COMMENT
              onChanged: (value) {
                setState(() {
                  sliderValue = value;
                });
              }),

In this code, if I comment out the marked //TO COMMENT lines which are the divisions and label properties, the `label goes away as expected, and the animation is smooth again.

I assume this is due to divisions, and any amount of it, even just 100 does not change the lag in any way.

Additionally, it seems that the label property does not work on its own. It needs the divisions property to also be set so that the value label can be displayed.

What is the workaround so that I can achieve a Slider with the smoothness shown in the first image, but have the default value label or what looks the same?

CodePudding user response：

If you take a look on source code, you can find

Change it to

static const Duration _positionAnimationDuration = Duration.zero;

Changing on source-code will affect on others project, instead create a local dart file, paste the full slider code and make changes.

Let say we have created customSlider.dart file . Make sure to replace some(./xyz.dart) top imports with import 'package:flutter/cupertino.dart'; or material on our customSlider.dart. Then replace _positionAnimationDuration.

To use this, import the file

import 'customSlider.dart' as my_slider;
...
//use case 
my_slider.Slider(....)

CodePudding user response：

// create class 

 // .yaml > another_xlider: ^1.0.0 

import 'package:another_xlider/another_xlider.dart';
import '../res/res_controller.dart';
import '../utils/utils_controller.dart';
import 'package:flutter/material.dart';

class RangeBar extends StatelessWidget {
  final List<double>? values;
  final double? min;
  final double? max;
  final Function(int, dynamic, dynamic)? onDragging;

  const RangeBar(
      {Key? key,
      @required this.values,
      @required this.onDragging,
      @required this.min,
      @required this.max})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return FlutterSlider(
        values: values!,
        // pre set values
        rangeSlider: true,
        handlerAnimation: FlutterSliderHandlerAnimation(
            curve: Curves.elasticOut,
            reverseCurve: Curves.bounceIn,
            duration: Duration(milliseconds: 500),
            scale: 1.5),
        jump: true,
        min: min ?? 0,
        max: max ?? 0,
        touchSize: Sizes.s13,
        trackBar: FlutterSliderTrackBar(
          activeTrackBar: BoxDecoration(color: AppColors.orange),
        ),
        tooltip: FlutterSliderTooltip(
          boxStyle: FlutterSliderTooltipBox(
            decoration: BoxDecoration(
              color: Colors.greenAccent,
              borderRadius: BorderRadius.all(Radius.circular(Sizes.s5)),
              border: Border.all(
                color: AppColors.steelGray,
              ),
            ),
          ),
          positionOffset: FlutterSliderTooltipPositionOffset(top: -Sizes.s15),
          alwaysShowTooltip: true,
          textStyle:
              TextStyles.defaultRegular.copyWith(fontSize: FontSizes.s11),
       
        ),
        onDragging: onDragging);
  }
}

// try to call 

  Container(
  child: _size(),
   )


 Widget _size() {
    {
      double sizeMin;
      double sizeMax;

        sizeMin =  0;
        sizeMax =  0;

        sizeMax = sizeMin.round() == sizeMax.round() ? sizeMax   1 : sizeMax;

        return RangeBar(
          values: [
          // add values
          ],
          min: sizeMin,
          max: sizeMax.ceilToDouble(),
          onDragging: (p0, lowerValue, upperValue) {
            
            log(lowerValue);
            log(upperValue);
           
          },
        );
      
      return C0();
    }
  }