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.