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: