A heatmap widget for Flutter apps.

heatmap electricity consumption

heatmap water consumption


1 - Depend on it

Add it to your package's pubspec.yaml file

  fl_heatmap: ^0.1.0

2 - Install it

Install packages from the command line

flutter packages get

3 - Use it

This is an example for the months of four years:

import 'package:fl_heatmap/fl_heatmap.dart';

class _ExampleState extends State<ExampleApp> {
  HeatmapItem? selectedItem;

  late HeatmapData heatmapData;

  void initState() {

  void _initExampleData() {
    const rows = [
    const columns = [
    final r = Random();
    const String unit = 'kWh';
    heatmapData = HeatmapData(rows: rows, columns: columns, items: [
      for (int row = 0; row < rows.length; row++)
        for (int col = 0; col < columns.length; col++)
              value: r.nextDouble() * 6,
              unit: unit,
              xAxisLabel: columns[col],
              yAxisLabel: rows[row]),

  Widget build(BuildContext context) {
    final title = selectedItem != null
        ? '${selectedItem!.value.toStringAsFixed(2)} ${selectedItem!.unit}'
        : '--- ${heatmapData.items.first.unit}';
    final subtitle = selectedItem != null
        ? '${selectedItem!.xAxisLabel} ${selectedItem!.yAxisLabel}'
        : '---';
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Heatmap plugin example app'),
        body: SingleChildScrollView(
          child: Column(
            children: [
              const SizedBox(height: 16),
              Text(title, textScaleFactor: 1.4),
              const SizedBox(height: 8),
                  onItemSelectedListener: (HeatmapItem? selectedItem) {
                        'Item ${selectedItem?.yAxisLabel}/${selectedItem?.xAxisLabel} with value ${selectedItem?.value} selected');
                    setState(() {
                      this.selectedItem = selectedItem;
                  rowsVisible: 5, // Only the first 5 rows are visible
                  heatmapData: heatmapData)

If necessary you can inherit from HeatmapItem and attach some payload, e.g. the electricity costs for the consumption:

class CustomHeatmapItem extends HeatmapItem {
      {required this.costs,
      required double value,
      required String unit,
      required String xAxisLabel,
      required String yAxisLabel})
      : super(
            value: value,
            unit: unit,
            xAxisLabel: xAxisLabel,
            yAxisLabel: yAxisLabel);
  final double costs;


  • Supporting custom color schemes with dynamic size or use predefined color palettes such as colorPaletteTemperature, colorPaletteRed, colorPaletteBlue.
  • x- and y-axis labels are completely dynamic
  • Do not show the x-axis/y-axis labels if necessary
  • Detect clicks on cells and get back the data item to show detailed information about the cell
  • Use different styles for the cells if necessary
  • Show only the first lines and user can request to show all