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

Issue

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?

Solution

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.

Answered By – Zujaj Misbah Khan

Answer Checked By – Cary Denson (FlutterFixes Admin)