Draw and interact with SVG in Flutter

Question

We are developing an application which displays a human body, based on a SVG input. This human body is divided in several regions, think of a head, left-arm, right-arm, belly etc.

We want to highlight a region of the image when the user clicks on for example one arm. What is the best way to achieve such a thing in Flutter?

We tried to use Flare for Flutter, but this librart does not provide direct interaction with the human body being displayed.

Is there an easier way to:

• Render the body based on a SVG (artwork might change in future developnent);
• Detect click, e.g. GestureDetector;
• Find pressed region based on the coordinates of the click;

Note that simple boxes will not work since parts of the image overlap. You can see the effect we want to achieve, I clicked on one arm here. Drawing some clickable box around it, will not work well.

Thanks in advance.

Barricade

Answer 1

I made it working by using the built_path library, which precompiles SVG paths into Path objects. We then wrapped it into a ClipPath Widget as follows:

return GestureDetector(
    onTap: () => _bodyPartTapped(part),
    child: ClipPath(
        child: Stack(children: <Widget>[
          Container(
              color: pressedBodyPart == part
                  ? Colors.blue
                  : Colors.transparent),
          CustomPaint(painter: PathPainter(path))
        ]),
        clipper: PathClipper(path)));

It will color a body part blue if it's pressed, which is working perfectly fine.

I have created a full example which can be found here: https://github.com/gi097/flutter_clickable_regions

Barricade

Hi Giovanni, I have also the similar problem based on svg click . How we 1. Hook click action on SVG, and get the 'id' of element that was clicked. 2. Change Color the SVG elements from code. – Convalescence

@MadhusudhanSahni, take a look at my example at github.com/gi097/flutter_clickable_regions :) – Barricade

thanks for the help . I think one file is missing which name is "map_svg_data.svg_path.g.dart". Due to this file this example throw error. – Convalescence

Yes, read the readme file. You need to run flutter packages pub run build_runner build to generate the file. – Barricade

I already try it but we got error .Can you please check here drive.google.com/file/d/1W4ITJi2BN0Y2ZJSYV0u2L5eXPjV89glg/… the attached screenshot – Convalescence

Use the flutter stable branch. The master branch does not work with the library at the moment. – Barricade

can you tell me why some regions are not clicked? – Sternson

I wish that I could upvote this more than once ! Thank you, Giovanni, for not just posting an answer, but also a great demo. far too many people are willing to ask for help, but if they solve it themselves they do not think to post an answer which could help others This is a refreshing change. Thank you – Thordis