How do I apply colors to a multi color svg in flutter?

Question

I am looking for changing colors of an illustration svg in flutter. I tried flutter_svg package but it support applying only one color to the svg and if I do that svg will be displayed as a single color svg, individual colors are lost. Is there any way to change colors at runtime in flutter for a multi color svg?

Answer 1

Do you mean something like this? I call it SVG colorization.

I'll try to squeeze the concept into a short summary. In an SVG file, you need to play around with the fill property as it defines the hex color code.

In terms of programming, you would:

1. Extract the SVG file data as a String variable svgCode.

2. Assign the previous hex color code in previousColor & the currently selected hex color code in newColor.

3. Apply the String.replaceAll method on svgCode to replace the colors.

4. Update the value of the previousColor.

A more brief elaboration would be

/// Initially without any color selection.
SVGPicture.string('''<svg code with fill #f7ebcb>''');

/// After the user selects the red color.
SVGPicture.string('''<svg code with fill #FF0000>''');

This tutorial can help to solve your issue. Not only does this app changes the color on runtime, but it also allows the user to download the manipulated SVG code.