Some provinces are not clicked.

[abkoradiya]

[gi097]

As mentioned in the README.md:

Known issues Some provinces are not clickable. This is an issue of the SVG being used.

This code should work with more simple SVG images since this one is quite complex. Please try it with your own SVG example and let me know if that goes well.

[abkoradiya]

I have need of this type of map. Can you tell me why this issue is happening?

[gi097]

No I am sorry. I did not investigate much on this issue, but when I have time I will. Did you try it with another map?

[abkoradiya]

Yes I have checked with other map. Same problem occur.

[abkoradiya]

I think this is occur due to some path drawing outside the stack. Like "clipchildren false and clippadding false" in android.

[gi097]

I investigated the issue and it's due the Transform widgets. I don't have time to look into this now, maybe you can give it a try?

[reiner-vaca]

Thanks for your example, it helped me a lot for what I needed to do.

** EDITED ** The solution I implemented to make everything work correctly was ** Convert SVGs to Flutter Custom Paint Code ** with the following page fluttershapemaker. create the responsive path.

[fleece30]

Thanks for your example, it helped me a lot for what I needed to do. The solution that I implemented to make everything work correctly was to rebuild the svg file with illustrator, at a dimension of 300px high and 280px width and it worked wonderfully in different screen resolutions in portrait mode.

Are all the areas clickable?

[fleece30]

I think this is occur due to some path drawing outside the stack. Like "clipchildren false and clippadding false" in android.

Did you manage to find a solution?

[abkoradiya]

I think this is occur due to some path drawing outside the stack. Like "clipchildren false and clippadding false" in android.

Did you manage to find a solution?

No, still can't find.

[fleece30]

The contents of the provinces is going out of the stack. Everything outside of the stack is unclickable like this:

[gi097]

Thanks for the info. Please make a PR once somebody figures out how to fix this properly.

[curioustechizen]

I can confirm that this comment helped me. I used Figma to regenerate the SVG. It remains to be seen how well this process scales for other maps downloaded from various sources. Also, how does one decide on the 300x280 number?

[anas-essaguiar]

Please , does anyone one knows how this is scaled , I don't get the concept of this scaling , also it's important because once we adjust the map using illustrator it gets very small .

[raiyan24r]

Please , does anyone one knows how this is scaled , I don't get the concept of this scaling , also it's important because once we adjust the map using illustrator it gets very small .

Same problem here

[raiyan24r]

Thanks for your example, it helped me a lot for what I needed to do. The solution that I implemented to make everything work correctly was to rebuild the svg file with illustrator, at a dimension of 300px high and 280px width and it worked wonderfully in different screen resolutions in portrait mode.

Hey! Did you manually change the height and width in the map_svg_data.dart file as well after resizing on illustrator?

[raiyan24r]

Did anyone yet solve these problems?

1. I resized the Svg file to 300px and 280px as suggested here but it seems like the the parent container/canvas of the map is aligned to the left and the actual map is at the right and very small.
2. I tried the scaling factor,it resizes the whole canvas and not the map regions inside. 3.How to I resize only the map regions,and not the canvas.And by default isn't the canvas supposed to originate from the top left corner?How to specify the origin?

Any help would be really really appreciated.I am stuck here for weeks now.

The blue background is just a container I wraped around the "Stack(children: _buildMap()))," widget

[raiyan24r]

Did anyone yet solve these problems?

1. I resized the Svg file to 300px and 280px as suggested here but it seems like the the parent container/canvas of the map is aligned to the left and the actual map is at the right and very small.
2. I tried the scaling factor,it resizes the whole canvas and not the map regions inside. 3.How to I resize only the map regions,and not the canvas.And by default isn't the canvas supposed to originate from the top left corner?How to specify the origin?

Any help would be really really appreciated.I am stuck here for weeks now.

The blue background is just a container I wraped around the "Stack(children: _buildMap()))," widget

Upload your project to your repository to better appreciate and help you.

https://github.com/the-blue-sparrow/bangladesh_map

Here you go.

[raiyan24r]

I can confirm that this comment helped me. I used Figma to regenerate the SVG. It remains to be seen how well this process scales for other maps downloaded from various sources. Also, how does one decide on the 300x280 number?

I wrapped the stack in a container, and assigned a background color to appreciate the clickable area, I tried various dimensions and this was the one that I found useful in various screen resolutions, and being an svg file it would not matter what resolution it has

Why is the touch-target aligned at the right of the clickable area? Is it possible to align it at the center?

[Smiacter]

I write a demo in another way, hope can help you guys.https://github.com/Smiacter/flutter_svg_clickable here is some screenshot on iPhone and iPad(portrait and landscape):

[tingfong214]

I write a demo in another way, hope can help you guys.https://github.com/Smiacter/flutter_svg_clickable here is some screenshot on iPhone and iPad(portrait and landscape):

This is awesome. Finally. Thanks

[markvideradelacruz]

hello.Where can I create an svg file from a png image?Thank you guys in advanced!

[flv999]

Hello. Works for flutter web?