image_hotspot
is a Flutter package that allows you to create interactive hotspots on images. It provides a simple way to define clickable areas on images that trigger custom actions when tapped.
- Define multiple hotspots on an image.
- Customizable hotspot positions.
- Trigger actions when hotspots are tapped.
Add image_hotspot
to your pubspec.yaml
:
dependencies:
image_hotspot: ^0.1.1
import 'package:flutter/material.dart';
import 'package:image_hotspot/image_hotspot.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('Image Hotspot Example')),
body: Center(
child: ImageHotspot(
imagePath: 'assets/sample_image.jpg',
imageWidth: 300,
imageHeight: 200,
imageFit: BoxFit.cover,
showTooltip: true,
hotspots: [
Hotspot(
x: 10,
y: 20,
onTap: () => print('Hotspot 1 tapped'),
tooltip: 'This is hotspot 1',
color: Colors.blue,
size: 30,
),
Hotspot(
x: 200,
y: 150,
onTap: () => print('Hotspot 2 tapped'),
// tooltip: 'This is hotspot 2',
icon: Icon(Icons.star, color: Colors.yellow),
),
],
),
),
),
);
}
}
Check out the example directory for a complete sample app.
This project is licensed under the MIT License - see the LICENSE file for details.