15

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.

Artwork

gi097
  • 7,313
  • 3
  • 27
  • 49

1 Answers1

15

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

gi097
  • 7,313
  • 3
  • 27
  • 49
  • 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. – Madhusudhan Sahni Dec 03 '19 at 06:13
  • 1
    @MadhusudhanSahni, take a look at my example at https://github.com/gi097/flutter_clickable_regions :) – gi097 Dec 03 '19 at 15:34
  • 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. – Madhusudhan Sahni Dec 04 '19 at 11:41
  • 1
    Yes, read the readme file. You need to run `flutter packages pub run build_runner build` to generate the file. – gi097 Dec 04 '19 at 11:42
  • I already try it but we got error .Can you please check here https://drive.google.com/file/d/1W4ITJi2BN0Y2ZJSYV0u2L5eXPjV89glg/view?usp=sharing the attached screenshot – Madhusudhan Sahni Dec 04 '19 at 11:58
  • 1
    Use the flutter stable branch. The master branch does not work with the library at the moment. – gi097 Dec 04 '19 at 12:01
  • can you tell me why some regions are not clicked? – Abhay Koradiya Apr 04 '20 at 15:04
  • 1
    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 – Mawg says reinstate Monica Jun 19 '21 at 08:18