3

I want to do just that on the flutter, can anyone help me?

Clickable Marked points on an Image

Hello, I need to show an image with clickable dots on the screen and trigger an action when the user clicks on these dots. I heard that it is made with SVG, I've searched in several places but I find no solution in the flutter.

Cristian Peres de Lima
  • 31
  • 1
  • 4

1 Answers1

0

I was struggling with a similar situation.

Slah's solution --- put a operational layer on top of the background image --- works if you don't need pinch to zoom the image, but in my case the positioned widgets get invalid when zooming in the image.

My solution is embedding the image into a webview, you may use webview_flutter because it can be easily plugged onto your widget tree, but I think in your case flutter_webview_plugin works too since you just need to listen to some click events. Add hyperlinks to the elements to be clicked, then play with the click event by webviewcontroller(webview_flutter) or onUrlChanged Stream(flutter_webview_plugin).

One benefit you can get immediately is the ability to use .svg without any other packages by Uri.dataFromString('<html><svg>some svg codes</svg></html>', mimeType: 'text/html').toString()

Then you have full control of the appearance(via css) and the behavior(via javascript). e.g.You may define irregular areas to be clickable, and responsive to clicks.

Wenhui Luo
  • 266
  • 3
  • 13
  • Right! I really don't need to zoom the image. I will test webView to see if it works. Do you know of any websites or tools that allow you to add these dots to the image? – Cristian Peres de Lima Jan 10 '20 at 16:56
  • @CristianPeresdeLima the key words you wanna google is `mapped image` or something like `image mapping` – Wenhui Luo Jan 10 '20 at 17:00
  • Thanks for your help, but unfortunately I couldn't implement it as I would have to create a custom svg mapping the specific points I need. And webView operations would be all in javascript. I thought it was simpler and more flutter, but thanks a lot anyway. – Cristian Peres de Lima Jan 11 '20 at 13:11
  • @WenhuiLuo could you tell me how you got flutter webview - I am using inapp_webview - to tune in to pinch/zoom events? I can get responses to tap events but two finger pinch zoom seems to vanish into the ether. – DroidOS Apr 04 '20 at 08:58
  • 1
    @DroidOS webview_flutter have pinch to zoom enabled by default on iOS, fro android platform, refer to this PR: https://github.com/flutter/plugins/pull/2451 – Wenhui Luo Apr 04 '20 at 18:19