Heatlens 🚧
⚠️ This library is still in development.
🔥 Heatlens for Flutter
A powerful heatmap analytics tool to help you understand how users interact with your Flutter application. See every click, tap, and gesture to optimize your user experience.
🧐 What is Heatlens?
Heatlens provides a visual way to understand user behavior on your app or website. Instead of guessing where users click, you can see it. This package is the client-side library that connects your Flutter app to the Heatlens service. It's lightweight, easy to integrate, and automatically captures user interactions.
Once integrated, you can use the Heatlens Chrome Extension to view the heatmap data directly on top of your live website.
✨ How It Works
Integrating the heatlens package is a breeze. Once it's set up, it automatically and securely captures:
- Screen Views: Understand which pages are most popular.
- User Interactions: Track all taps, double taps, and touch-and-drag gestures.
This data is sent to the Heatlens servers, where it's processed into an intuitive heatmap for you and your team to analyze.
🚀 Getting Started
Getting started is simple! Just wrap your root widget (e.g., MaterialApp) with the Heatlens widget provided by this package.
Example Usage:
import 'package:heatlens/heatlens.dart';
import 'package.flutter/material.dart';
void main() => runApp(const ExampleApp());
class ExampleApp extends StatelessWidget {
const ExampleApp({super.key});
@override
Widget build(BuildContext context) {
// Wrap your root widget with Heatlens
return Heatlens(
// Your unique token from the Heatlens dashboard
token: 'YOUR-HEATLENS-API-TOKEN',
child: MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Heatlens Example'),
),
body: const Center(
child: Text('Hello, Heatlens!'),
),
),
),
);
}
}
And that's it! The package will now automatically track user interactions.
⚙️ Configuration Properties
You can customize the Heatlens widget with the following properties:
| Property | Type | Description |
|---|---|---|
token |
String |
(Required) Your unique API token from the Heatlens dashboard. This links the data to your account. |
child |
Widget |
(Required) The root widget of your application, typically MaterialApp or CupertinoApp. |
debugMode |
bool |
(Optional) Set to true to see debug logs in the browser console as interactions are tracked. Defaults to false. |
disabled |
bool |
(Optional) Set to true to turn off heatlens, when true none events will be sent to server. |
properties |
Map<String, String> |
(Optional) Use to attach properties that will be stored with each event for later filtering and reporting. |
session |
String |
(Optional) Use this to identify the user session. You can pass a user ID to recognize the same user across different devices. If null, one will be generated automatically. |