Hello everyone, i'm trying to creat a clickable map widget of the city of Paris. Here is my svg image :https://upload.wikimedia.org/wikipedia/commons/5/5f/Paris-map-arr.svg?uselang=fr. I want to have each district clickable. I try to see that git :https://github.com/gi097/flutter_clickable_regions which is very interesting but I don't know how i can implement the code in the custom widget. Gpt has helped me with a code structure. Looking forward to read your answers! Have a great day ! Alex
: // Automatic FlutterFlow imports import '/backend/backend.dart'; import '/backend/schema/structs/index.dart'; import '/flutter_flow/flutter_flow_theme.dart'; import '/flutter_flow/flutter_flow_util.dart'; import '/custom_code/widgets/index.dart'; // Imports other custom widgets import '/flutter_flow/custom_functions.dart'; // Imports custom functions import 'package:flutter/material.dart'; // Begin custom widget code // DO NOT REMOVE OR MODIFY THE CODE ABOVE! // This code assumes you have a way to convert your SVG paths into Flutter Path objects. // You would need to extract path data from your SVG file and convert them accordingly. class InteractiveMap extends StatelessWidget { final Map<String, Path> paths; // Your SVG paths go here InteractiveMap({Key? key, required this.paths}) : super(key: key); @override Widget build(BuildContext context) { // Assuming `paths` is a map where the key is the region name and the value is the path object. List<Widget> regionWidgets = paths.keys.map((regionName) { return GestureDetector( onTap: () { print('Region $regionName tapped'); // Handle region tap }, child: CustomPaint( painter: PathPainter(paths[regionName]!), ), ); }).toList(); return Stack(children: regionWidgets); } } class PathPainter extends CustomPainter { final Path path; PathPainter(this.path); @override void paint(Canvas canvas, Size size) { Paint paint = Paint() ..color = Colors.transparent ..strokeWidth = 1.0 ..style = PaintingStyle.stroke; canvas.drawPath(path, paint); } @override bool shouldRepaint(CustomPainter oldDelegate) => false; } // Set your widget name, define your parameter, and then add the // boilerplate code using the green button on the right!