Flutter: How to add thumb Image to Slider?

Question

I tried to add an image to slider thumb, but I haven't an idea of how it should work. At SliderThemeData we haven't parameters for adding thumb image.

I have already tied to use SliderComponentShape for drawing thumb, but it didn't work.

class TimeReportTextField extends StatefulWidget {
  @override
  _TimeReportTextFieldState createState() => _TimeReportTextFieldState();
}

class _TimeReportTextFieldState extends State<TimeReportTextField> {
  final textFieldController = TextEditingController();
  ui.Image customImage;

  Future<ui.Image> load(String asset) async {
    ByteData data = await rootBundle.load(asset);
    ui.Codec codec = await ui.instantiateImageCodec(data.buffer.asUint8List());
    ui.FrameInfo fi = await codec.getNextFrame();
    return fi.image;
  }

  @override
  void initState() {
    load('images/slider_thumb.png').then((image) {
      setState(() {
        customImage = image;
      });
    });
    super.initState();
  }

  @override
  void dispose() {
    textFieldController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Container(
          decoration: BoxDecoration(
              borderRadius: BorderRadius.all(
                Radius.circular(3),
              ),
              border: Border.all(color: Color(0xFFF4F4F4))),
          margin: EdgeInsets.all(12),
          child: Row(
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.all(12.0),
                child: Text(
                  'STD',
                  style: TextStyle(
                      fontFamily: 'SF-Pro',
                      fontSize: 13,
                      color: Colors.black.withOpacity(0.4)),
                ),
              ),
              Flexible(
                child: Padding(
                  padding: const EdgeInsets.only(right: 8),
                  child: TextField(
                    controller: textFieldController,
                    textAlign: TextAlign.end,
                    textInputAction: TextInputAction.done,
                    keyboardType: TextInputType.number,
                    decoration: InputDecoration(border: InputBorder.none),
                  ),
                ),
              ),
            ],
          ),
        ),
        Padding(
          padding: const EdgeInsets.only(top: 32.5),
          child: SliderTheme(
            data: SliderThemeData(
              activeTrackColor: Colors.red,
              inactiveTrackColor: Colors.transparent,
              thumbShape: SliderThumbImage(customImage),
            ),
            child: Slider(
              onChanged: (value) {},
              value: 0.5,
            ),
          ),
        ),
      ],
    );
  }
}

class SliderThumbImage extends SliderComponentShape {
  final ui.Image image;

  SliderThumbImage(this.image);

  @override
  Size getPreferredSize(bool isEnabled, bool isDiscrete) {
    return Size(5, 5);
  }

  @override
  void paint(PaintingContext context, Offset center,
      {Animation<double> activationAnimation,
      Animation<double> enableAnimation,
      bool isDiscrete,
      TextPainter labelPainter,
      RenderBox parentBox,
      SliderThemeData sliderTheme,
      TextDirection textDirection,
      double value}) {
    var canvas = context.canvas;

    canvas.drawImage(image, Offset(5, 5), new Paint());
  }
}

Answer 1

This Library can be used to add image to the slider thumb easily

https://pub.dev/packages/flutter_xlider

         FlutterSlider(
          values: [40],
          max: 100,
          min: 0,
         
          handler: FlutterSliderHandler(
            decoration: BoxDecoration(),
            child: Material(
              type: MaterialType.canvas,
              elevation: 3,
              child: Container(
                  padding: EdgeInsets.only(bottom:4),
                  child: Image.asset(Assets.filter_thumb)),
            ),
          ),
          onDragging: (handlerIndex, lowerValue, upperValue) {
            
          },
        );

Answer 2

I've already fixed my problem.

import 'dart:ui' as ui;

class SliderThumbImage extends SliderComponentShape {
    final ui.Image image;

    SliderThumbImage(this.image);

    @override
    Size getPreferredSize(bool isEnabled, bool isDiscrete) {
        return Size(0, 0);
    }

    @override
    void paint(PaintingContext context, Offset center,
        {Animation<double> activationAnimation,
        Animation<double> enableAnimation,
        bool isDiscrete,
        TextPainter labelPainter,
        RenderBox parentBox,
        SliderThemeData sliderTheme,
        TextDirection textDirection,
        double value}) {
    final canvas = context.canvas;
    final imageWidth = image?.width ?? 10;
    final imageHeight = image?.height ?? 10;

    Offset imageOffset = Offset(
        center.dx - (imageWidth / 2),
        center.dy - (imageHeight / 2),
    );

    Paint paint = Paint()..filterQuality = FilterQuality.high;

    if (image != null) {
        canvas.drawImage(image, imageOffset, paint);
    }
  }
}