How to give rectangular shape to the thumb icon in slider in flutter?

Question

i am learning flutter. I used Slider class to create slider ( in android its called Seekbar ), here i want to change the thumb icon to rectangular shape, it is possible or not, Please let me know any solution for this?

SliderTheme.of(context).copyWith(
                      trackShape: CustomTrackShape(),
                      thumbShape: RoundSliderThumbShape(
                        enabledThumbRadius: 15,
                        disabledThumbRadius: 5,
                      ),

                  ),
                  child: Slider(
                    inactiveColor: Colors.black12,
                    value: _sliderValue,
                    min: 5000,
                    max: 500000,
                    divisions: 1000,
                    label: _sliderValue.round().toString(),
                    onChanged: (value) {
                      setState(() {
                        _sliderValue = value;
                        print("slider value" + _sliderValue.toString());
                        // _amountController.text = value.floor().toString();
                        _amountController.text =
                            getChangedAmount(value.floor().toString());
                        // print("amount controller value" + _amountController.text);
                      });
                    },
                  ),
                ),

** I want below type **

Does this answer your question? [How to customize Slider widget in Flutter?](https://stackoverflow.com/questions/57057765/how-to-customize-slider-widget-in-flutter) — HeIsDying, Aug 02 '21 at 06:44
Thankx for your suggestion, but i have an issue while @overriding the "void paint()" method. Error is -> The method 'SliderThumbImage.paint' has fewer named arguments than those of overridden method 'SliderComponentShape.paint'. — Rakesh Saini, Aug 02 '21 at 07:00
@Rakesh Saini,I think your solution here https://medium.com/flutter-community/flutter-sliders-demystified-4b3ea65879c — Ravindra S. Patil, Aug 02 '21 at 07:05

score 2 · Answer 1 · answered Jan 09 '23 at 16:05

You can create a custom thumbShape using SliderComponentShape. In my implementation, I just modified the paint in the default RoundSliderThumbShape.

class RectSliderThumbShape extends SliderComponentShape {
  /// Create a slider thumb that draws a Rect.
  const RectSliderThumbShape({
    this.enabledThumbRadius = 10.0,
    this.disabledThumbRadius,
    this.elevation = 1.0,
    this.pressedElevation = 6.0,
  });

  /// The preferred radius of the round thumb shape when the slider is enabled.
  ///
  /// If it is not provided, then the Material Design default of 10 is used.
  final double enabledThumbRadius;

  /// The preferred radius of the round thumb shape when the slider is disabled.
  ///
  /// If no disabledRadius is provided, then it is equal to the
  /// [enabledThumbRadius]
  final double? disabledThumbRadius;
  double get _disabledThumbRadius => disabledThumbRadius ?? enabledThumbRadius;

  /// The resting elevation adds shadow to the unpressed thumb.
  ///
  /// The default is 1.
  ///
  /// Use 0 for no shadow. The higher the value, the larger the shadow. For
  /// example, a value of 12 will create a very large shadow.
  ///
  final double elevation;

  /// The pressed elevation adds shadow to the pressed thumb.
  ///
  /// The default is 6.
  ///
  /// Use 0 for no shadow. The higher the value, the larger the shadow. For
  /// example, a value of 12 will create a very large shadow.
  final double pressedElevation;

  @override
  Size getPreferredSize(bool isEnabled, bool isDiscrete) {
    return Size.fromRadius(isEnabled == true ? enabledThumbRadius : _disabledThumbRadius);
  }

  @override
  void paint(
      PaintingContext context,
      Offset center, {
        required Animation<double> activationAnimation,
        required Animation<double> enableAnimation,
        required bool isDiscrete,
        required TextPainter labelPainter,
        required RenderBox parentBox,
        required SliderThemeData sliderTheme,
        required TextDirection textDirection,
        required double value,
        required double textScaleFactor,
        required Size sizeWithOverflow,
      }) {
    assert(context != null);
    assert(center != null);
    assert(enableAnimation != null);
    assert(sliderTheme != null);
    assert(sliderTheme.disabledThumbColor != null);
    assert(sliderTheme.thumbColor != null);

    final Canvas canvas = context.canvas;
    final Tween<double> radiusTween = Tween<double>(
      begin: _disabledThumbRadius,
      end: enabledThumbRadius,
    );
    final ColorTween colorTween = ColorTween(
      begin: sliderTheme.disabledThumbColor,
      end: sliderTheme.thumbColor,
    );

    final Color color = colorTween.evaluate(enableAnimation)!;
    final double radius = radiusTween.evaluate(enableAnimation);

    final Tween<double> elevationTween = Tween<double>(
      begin: elevation,
      end: pressedElevation,
    );

    final double evaluatedElevation = elevationTween.evaluate(activationAnimation);
    final Path path = Path()
      ..addArc(Rect.fromCenter(center: center, width: 2 * radius, height: 2 * radius), 0, math.pi * 2);

    bool paintShadows = true;
    assert(() {
      if (debugDisableShadows) {
        paintShadows = false;
      }
      return true;
    }());

    if (paintShadows) {
      canvas.drawShadow(path, Colors.black, evaluatedElevation, true);
    }

    // Use drawRect instead of drawCircle
    canvas.drawRect(Rect.fromCircle(center: center, radius: radius),
      Paint()..color = color,
    );
  }
}

Then use RectSliderThumbShape on SliderTheme.thumbShape

SliderTheme(
  data: const SliderThemeData(
    thumbColor: Colors.green,
    thumbShape: RectSliderThumbShape()
  ),
  child: Slider(
    value: _currentSliderValue,
    max: 100,
    divisions: 5,
    label: _currentSliderValue.round().toString(),
    onChanged: (double value) {
      setState(() {
        _currentSliderValue = value;
      });
    },
  ),
),

Here's how it looks like

How edit this code for insert inside a square container an image? — joisberg, Apr 20 '23 at 15:59

How to give rectangular shape to the thumb icon in slider in flutter?

1 Answers1