fl_heatmap - A heatmap build for Flutter apps

Overview

fl_heatmap

A heatmap widget for Flutter apps.

heatmap electricity consumption

heatmap water consumption

Usage

1 - Depend on it

Add it to your package's pubspec.yaml file

dependencies:
  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;

  @override
  void initState() {
    _initExampleData();
    super.initState();
  }

  void _initExampleData() {
    const rows = [
      '2022',
      '2021',
      '2020',
      '2019',
    ];
    const columns = [
      'Jan',
      'Feb',
      'Mär',
      'Apr',
      'Mai',
      'Jun',
      'Jul',
      'Aug',
      'Sep',
      'Okt',
      'Nov',
      'Dez',
    ];
    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++)
          HeatmapItem(
              value: r.nextDouble() * 6,
              unit: unit,
              xAxisLabel: columns[col],
              yAxisLabel: rows[row]),
    ]);
  }

  @override
  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),
              Text(subtitle),
              const SizedBox(height: 8),
              Heatmap(
                  onItemSelectedListener: (HeatmapItem? selectedItem) {
                    debugPrint(
                        'Item ${selectedItem?.yAxisLabel}/${selectedItem?.xAxisLabel} with value ${selectedItem?.value} selected');
                    setState(() {
                      this.selectedItem = selectedItem;
                    });
                  },
                  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 {
  CustomHeatmapItem(
      {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;
}

Features

  • 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

Getting Started

This project is a starting point for a Flutter plug-in package for all platforms without platform-specific implementation code.

For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

You might also like...

A collection of sample apps that use Stream

A collection of sample apps that use Stream

Flutter samples Quick Links Register to get an API key for Stream Chat Flutter Chat Tutorial Chat UI Kit Flutter SDK Repo What is Stream? Stream allow

Dec 21, 2022

A set of counter apps made for #FlutterCounterChallenge2020

flutter_counter_challenge_2020 A set of counter apps made for #FlutterCounterChallenge2020. Run flutter create . inside the repository after cloning i

Dec 30, 2022

Ensiklopedi Multiplatform Apps

ensiklopedi A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if t

Dec 9, 2021

Use dynamic and beautiful card view pagers (horizontal direction) to help you create great apps.

Use dynamic and beautiful card view pagers (horizontal direction) to help you create great apps.

Use dynamic and beautiful card view pagers (horizontal direction) to help you create great apps. Preview Mobile Vertical Card Pager Web Web Link Insta

Dec 9, 2022

Demonstrate how to easily program Android apps on Gitpod

Demonstrate how to easily program Android apps on Gitpod

Developing Android apps on Gitpod This project is intended to demonstrate how to easily program Android apps on Gitpod. It is based on this guide and

Dec 8, 2022

Flutterbase taxi - A large variety of apps depend on map services.

Flutterbase taxi - A large variety of apps depend on map services.

Flutterbase taxi A large variety of apps depend on map services. The purpose of this project was to test Google Map Services in connection with Flutte

Dec 29, 2022

Build Tic Tac Toe Game in Flutter

Build Tic Tac Toe Game in Flutter

Flutter TicTacToe Game Build legendary Tic Tac Toe game in flutter. Show some ❤️ and star the repo to support the project Screenshots Watch the video

Dec 19, 2022

A WhatsApp clone build using Flutter and AWS Amplify DataStore

A WhatsApp clone build using Flutter and AWS Amplify DataStore

Whatsapp Clone using Amplify DataStore in Flutter About The Project Built With Flutter AWS Amplify DataStore Getting Started To get a local copy up an

Jan 4, 2023
Owner
Timo Bähr
Timo Bähr
Examples showing how to use Rid in order to build Dart/Flutter apps integrated with Rust.

Examples showing how to use Rid in order to build Dart/Flutter apps integrated with Rust.

Thorsten Lorenz 205 Dec 24, 2022
A flutter plugin for integrating Mobile Money Payments to your flutter apps

Add Mobile Money payments to your flutter apps using the FlutterWave api gateway. Features Recieve Payments through Mobile Money in Uganda Supports MT

null 5 Nov 9, 2022
Flutter OSM - OSM Plugin For Flutter Apps

flutter_osm_plugin osm plugin for flutter apps (only Android for now, iOS will b

null 1 Mar 29, 2022
Firebase + Flutter sample apps with code snippets, supported by comprehensive articles for each implementation.

FlutterFire Samples This repo is created to contain various sample apps demonstrating the integration of Firebase with Flutter. The final goal is to c

Souvik Biswas 186 Dec 24, 2022
A Flutter starter-kit for production-level apps.

Flutter Starter Introduction We wanted to take Flutter a step further and accelerate the process of building production-level apps. Presenting our sol

GeekyAnts 374 Dec 30, 2022
Learn how to incorporate Firebase into our Flutter apps

Flash Chat ⚡️ Our Goal The objective of this tutorial is to learn how to incorporate Firebase into our Flutter apps. We'll be using Firebase Cloud Fir

null 0 Oct 27, 2021
Cooking apps - Cooking App made using flutter framework

cooking_apps Cooking App made using flutter framework. This template app contain

Viraj Shah 1 Jan 24, 2022
Mongolian vertical script widgets for Flutter apps

mongol This library is a collection of Flutter widgets for displaying traditional Mongolian vertical text. The primary widgets include: MongolText: ve

null 56 Dec 12, 2022
Easy and Fast internationalization for your Flutter Apps

Easy and Fast internationalization for your Flutter Apps Why easy_localization? ?? Easy translations for many languages ?? Load translations as JSON,

Aye7 672 Dec 18, 2022
Google UI is an open-source UI library for developing cross-platform apps using Flutter with Material Design 2.0

Google UI Google UI is an open-source UI library for developing cross-platform apps using Flutter with "Material Design 2.0" Table of contents Install

Ed Sulaiman 25 Dec 24, 2022