flutter_image_map 1.0.1

Image map, create areas with customizable colors on an image and response to clicking/touching. Just like what we have in html.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:flutter_image_map/flutter_image_map.dart';

void main() => runApp(const MyApp());

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<StatefulWidget> createState() {
    return ImageMapExample();
  }
}

class ImageMapExample extends State<MyApp> {
  bool _tapped = false;

  @override
  Widget build(BuildContext context) {
    final htmlDataRegions = ImageMapRegion.fromHtml(
      '''
<!-- Image Map Generated by http://www.image-map.net/ -->
<img src="Houtcomposiet_vlonder_met_bijbehorende_artikelen.jpg" usemap="#image-map">

<map name="image-map">
    <area target="" alt="Google" title="Google" href="https://www.google.com" coords="156,217,181,245" shape="rect">
    <area target="" alt="Apple" title="Apple" href="https://www.apple.com" coords="238,282,263,268,288,283,292,315,273,332,240,328,228,307" shape="poly">
    <area target="" alt="Facebook &amp; Instagram" title="Facebook &amp; Instagram" href="https://www.meta.com" coords="381,247,22" shape="circle">
</map>
''',
      Colors.red.withOpacity(0.5),
    );
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text("flutter_image_map Example")),
        body: ImageMap(
          image: Image.asset('assets/worldmap.png'),
          onTap: (region) {
            // ignore: avoid_print
            print('Pressed: ${region.title} / ${region.link}');
            setState(() {
              _tapped = !_tapped;
            });
          },
          regions: [
            ImageMapRegion.fromPoly(
              points: [
                const Offset(178, 152),
                const Offset(148, 179),
                const Offset(125, 173),
                const Offset(129, 191),
                const Offset(87, 191),
                const Offset(130, 226),
                const Offset(121, 270),
                const Offset(182, 285),
                const Offset(185, 272),
                const Offset(219, 276),
                const Offset(239, 260),
                const Offset(218, 225),
                const Offset(245, 186),
              ],
              color: _tapped
                  ? const Color.fromRGBO(50, 200, 50, 0.5)
                  : const Color.fromRGBO(50, 50, 200, 0.5),
              title: 'test1',
            ),
            ImageMapRegion.fromRect(
              rect: const Rect.fromLTWH(230, 295, 50, 50),
              color: _tapped
                  ? const Color.fromRGBO(50, 200, 50, 0.5)
                  : const Color.fromRGBO(50, 50, 200, 0.5),
              title: 'test2',
            ),
            ImageMapRegion.fromCircle(
              center: const Offset(460, 395),
              radius: 20,
              color: _tapped
                  ? const Color.fromRGBO(50, 200, 50, 0.5)
                  : const Color.fromRGBO(50, 50, 200, 0.5),
              title: 'test3',
            ),
            ...htmlDataRegions,
          ],
        ),
      ),
    );
  }
}