How i can drawing shapes using canvas or any other method in flutter?

Question

Before make/drawing shape image show look like

After making shape image show look like:

Here I'm sharing Zone data for drawing shape over the image

"points": [
                                {
                                    "x": 344.5,
                                    "y": 359.15625,
                                    "_id": "6587fd20aff80b07546062f9"
                                },
                                {
                                    "x": 343.5,
                                    "y": 547.15625,
                                    "_id": "6587fd20aff80b07546062fa"
                                },
                                {
                                    "x": 606.5,
                                    "y": 548.15625,
                                    "_id": "6587fd20aff80b07546062fb"
                                },
                                {
                                    "x": 605.5,
                                    "y": 359.15625,
                                    "_id": "6587fd20aff80b07546062fc"
                                }
                            ]

• There main case image coming from backend side with any resolution
• From flutter side run app priority mobile side as of now after run in all platforms
• Need to draw based on resolution app side image show fix in mobile side or show image actual size
• Shape coming any type of circle, star, rectangle, triangles etc...

Answer 1

To place rectangles on-top of the image I recommend using the Stack widget, and the Rect class.

The image from the back-end will need to include information about where to place the rectangles to cover specific zones. You could try some clever algorithm to auto-magically detect rooms, but this seems hard. If the image coming from the back-end could be any resolution, then I recommend representing this "zone" information with two points, maybe top left and bottom right, with values that are defined as percentages. Then when you get the image from the backend, you can check its size, then calculate the points for the rectangle by multiplying the width * percentage and height * percentage.