Adding The Svg Icon In The Custom Slider Using The Custom Painter

I am implementing the custom slider, where I have completed the gesture detection on the slider , now I want to add the SVG icon on the knob to drag, cannot find any resource. I ju

Solution 1:

update

1. add the path_drawing package
2. change the size of the svg icon
3. add following code

import'package:path_drawing/path_drawing.dart';


// inside the paint method of the CustomLeftPainter classPaint icon =
    _getPaint(color: Colors.black, width: 20, style: PaintingStyle.fill);
var iconSvg = Path()
  ..addPath(parseSvgPathData(rightPath[0]),
      Offset(leftInitHandler.dx - 10, leftInitHandler.dy - 10))
  ..addPath(parseSvgPathData(rightPath[1]),
      Offset(leftInitHandler.dx - 10, leftInitHandler.dy - 10));
;

canvas.drawPath(iconSvg, icon);


/// add list of pathsList<String> rightPath = <String>[
  'M10 20C8.8 20 7.8 19 7.8 17.8V17.2C7.3 17 6.9 16.8 6.5 16.6L6 17.1C5.6 17.5 5.1 17.7 4.5 17.7 3.9 17.7 3.3 17.5 2.9 17.1 2.1 16.2 2.1 14.8 2.9 14L3.4 13.5C3.2 13.1 3 12.7 2.8 12.2H2.2C1.6 12.2 1.1 12 0.6 11.5 0.2 11.1 0 10.6 0 10 0 8.8 1 7.8 2.2 7.8H2.8C3 7.3 3.2 6.9 3.4 6.5L2.9 6C2.5 5.6 2.3 5.1 2.3 4.5 2.3 3.9 2.5 3.3 2.9 2.9 3.8 2.1 5.2 2.1 6 2.9L6.5 3.4C6.9 3.2 7.3 3 7.8 2.8V2.2C7.8 1.6 8 1.1 8.5 0.6 8.9 0.2 9.4 0 10 0 10.1 0 10.3 0 10.4 0 11.5 0.2 12.2 1.2 12.2 2.2V2.8C12.7 3 13.1 3.2 13.5 3.4L14 2.9C14.4 2.5 14.9 2.3 15.5 2.3 16.1 2.3 16.7 2.5 17.1 2.9 17.9 3.8 17.9 5.2 17.1 6L16.6 6.5C16.8 6.9 17 7.3 17.2 7.8H17.8C18.4 7.8 18.9 8 19.4 8.5 19.8 8.9 20 9.4 20 10 20 11.2 19 12.2 17.8 12.2H17.2C17 12.7 16.8 13.1 16.6 13.5L17.1 14C17.5 14.4 17.7 14.9 17.7 15.5 17.7 16.1 17.5 16.7 17.1 17.1 16.6 17.5 16.1 17.7 15.5 17.7 15 17.7 14.4 17.5 14 17.1L13.5 16.6C13.1 16.8 12.7 17 12.2 17.2V17.8C12.2 18.4 12 18.9 11.5 19.4 11.2 19.7 10.9 19.9 10.4 20 10.4 20 10.4 20 10.4 20 10.3 20 10.1 20 10 20ZM6.4 15.2C6.5 15.2 6.6 15.2 6.7 15.3 7.3 15.7 7.9 15.9 8.6 16.1 8.9 16.2 9.1 16.4 9.1 16.7V17.8C9.1 18.3 9.5 18.8 10 18.8 10.1 18.8 10.1 18.7 10.2 18.7 10.4 18.7 10.5 18.6 10.7 18.5 10.8 18.3 10.9 18.1 10.9 17.8V16.7C10.9 16.4 11.1 16.2 11.4 16.1 12.1 15.9 12.7 15.7 13.3 15.3 13.5 15.2 13.9 15.2 14.1 15.4L14.9 16.2C15.2 16.6 15.8 16.6 16.2 16.2 16.4 16 16.5 15.8 16.5 15.5 16.5 15.3 16.4 15 16.2 14.9L15.4 14.1C15.2 13.9 15.2 13.5 15.3 13.3 15.7 12.7 15.9 12.1 16.1 11.4 16.2 11.1 16.4 10.9 16.7 10.9H17.8C18.3 10.9 18.8 10.5 18.8 10 18.8 9.7 18.7 9.5 18.5 9.3 18.3 9.2 18.1 9.1 17.8 9.1H16.7C16.4 9.1 16.2 8.9 16.1 8.6 15.9 7.9 15.7 7.3 15.3 6.7 15.2 6.5 15.2 6.1 15.4 5.9L16.2 5.1C16.6 4.8 16.6 4.2 16.2 3.8 16 3.6 15.8 3.5 15.5 3.5 15.3 3.5 15 3.6 14.9 3.8L14.1 4.6C13.9 4.8 13.5 4.8 13.3 4.7 12.7 4.3 12.1 4.1 11.4 3.9 11.1 3.8 10.9 3.6 10.9 3.3V2.2C10.9 1.7 10.6 1.4 10.2 1.3 10.1 1.3 10.1 1.3 10 1.3 9.7 1.3 9.5 1.3 9.3 1.5 9.2 1.7 9.1 1.9 9.1 2.2V3.3C9.1 3.6 8.9 3.8 8.6 3.9 7.9 4.1 7.3 4.3 6.7 4.7 6.5 4.8 6.1 4.8 5.9 4.6L5.1 3.8C4.8 3.4 4.2 3.4 3.8 3.8 3.6 4 3.5 4.2 3.5 4.5 3.5 4.7 3.6 5 3.8 5.1L4.6 5.9C4.8 6.1 4.8 6.5 4.7 6.7 4.3 7.3 4.1 7.9 3.9 8.6 3.8 8.9 3.6 9.1 3.3 9.1H2.2C1.7 9.1 1.3 9.5 1.3 10 1.3 10.3 1.3 10.5 1.5 10.7 1.7 10.8 1.9 10.9 2.2 10.9H3.3C3.6 10.9 3.8 11.1 3.9 11.4 4.1 12.1 4.3 12.7 4.7 13.3 4.8 13.5 4.8 13.9 4.6 14.1L3.8 14.9C3.4 15.2 3.4 15.8 3.8 16.2 4 16.4 4.2 16.5 4.5 16.5 4.7 16.5 5 16.4 5.1 16.2L5.9 15.4C6 15.3 6.2 15.2 6.4 15.2Z',
  'M10 14.4C7.6 14.4 5.6 12.4 5.6 10 5.6 7.6 7.6 5.6 10 5.6 10.1 5.6 10.2 5.6 10.4 5.6 11.5 5.7 12.5 6.2 13.2 7 14 7.8 14.4 8.9 14.4 10 14.4 11.1 14 12.2 13.2 13 12.5 13.8 11.5 14.3 10.4 14.4 10.2 14.4 10.1 14.4 10 14.4ZM10 6.9C8.3 6.9 6.9 8.3 6.9 10 6.9 11.7 8.3 13.1 10 13.1 10.1 13.1 10.2 13.1 10.3 13.1 11.9 13 13.1 11.6 13.1 10 13.1 8.4 11.9 7 10.3 6.9 10.2 6.9 10.1 6.9 10 6.9Z'
];

Solution 2:

Use the flutter_svg package, it has an example on how to draw an SVG to a canvas, which is basically what you want to achieve:

import 'package:flutter_svg/flutter_svg.dart';
final String rawSvg = '''<svg viewBox="...">...</svg>''';
final DrawableRoot svgRoot = await svg.fromSvgString(rawSvg, rawSvg);

// If you only want the final Picture output, just use
final Picture picture = svgRoot.toPicture();

// Otherwise, if you want to draw it to a canvas:
// Optional, but probably normally desirable: scale the canvas dimensions to
// the SVG's viewbox
svgRoot.scaleCanvasToViewBox(canvas);

// Optional, but probably normally desireable: ensure the SVG isn't rendered
// outside of the viewbox bounds
svgRoot.clipCanvasToViewBox(canvas);
svgRoot.draw(canvas, size); // <---------- I think this is the one that you actually want

You can also load the SVG as an Asset from your files. Bear in mind that a simpler example on your question could lead to better answers.