How can I change color fill of SVG image in Flutter

Viewed 41

Hello everybody need your help, I'm loading svg images into flutter with the svg_path_parser library, but I want to change the color of each path when touch it, right now I can change the color of all paths, but I need to know which path was selected and change the color of this path, somebody can help me or tell me how can I do this.. Thanks

I have this (flutter logo)..


final paths = [
    ['m48.75 95.97-25.91-25.74 14.32-14.57 40.39 40.31z', Color(0xff02539a)],
    ['m22.52 70.25 25.68-25.68h28.87l-39.95 39.95z', Color(0xd745d1fd)],
    ['m.29 47.85 14.58 14.57 62.2-62.2h-29.02z', Color(0xff45d1fd)]
  ];

class _MyHomePageState extends State<MyHomePage> {
  Color colorSelect = Colors.teal;
  bool showBorder = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Transform.scale(
        scale: 2.0,
        child: GestureDetector(
          child: Center(
            child: Container(
              width: 100,
              height: 100,
              child: Stack(
                children: widget.paths.map((e) {
                  return CustomPaint(
                      painter: MyPainter(
                          parseSvgPath(e[0] as String), colorSelect,
                          showPath: showBorder));
                }).toList(),
              ),
            ),
          ),
          behavior: HitTestBehavior.translucent,
          onTap: () {
            setState(() {
              // hide/show border
              showBorder = !showBorder;
              colorSelect = Colors.redAccent;

            });
          },
        ),
      ),
    );
  }
} 

class MyPainter extends CustomPainter {
  final Path path;
  final Color color;
  final bool showPath;
  MyPainter(this.path, this.color, {this.showPath = true});

  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint()
      ..color = color
      ..strokeWidth = 4.0;
    canvas.drawPath(path, paint);
    if (showPath) {
      var border = Paint()
        ..color = Colors.black
        ..strokeWidth = 1.0
        ..style = PaintingStyle.stroke;
      canvas.drawPath(path, border);
    }
  }
1 Answers
SvgPicture.asset("asset/icon_name.jpg",color: Colors.black),

Here changed my svg fill color using color property.

Related