How abdullah-cse/contribution_heatmap works
1. This repository is a Flutter package, not a standalone app. The primary deliverable is the contribution_heatmap library under lib/, which is published to pub.dev and exercised by a multi-platform example app plus a separate web playground.
2. The public API is thin and centered around lib/contribution_heatmap.dart and lib/src/widgets/contribution_heatmap.dart. This widget is the integration boundary for consumers: they pass contribution data, styling, date-range options, locale/weekday preferences, and an optional tap callback.
3. The core domain model is ContributionEntry in lib/src/models/contribution_entry.dart. It represents day-level contribution counts and is the input to the whole rendering pipeline. The package is designed around a date-to-count mapping rather than live state or network data.
4. Rendering is handled by a custom RenderBox in lib/src/rendering/render_contribution_heatmap.dart. This is the main architectural choice in the repo: instead of composing many Flutter widgets, the heatmap is painted directly for performance, with custom layout, drawing, and hit testing.
5. Data flow is: input entries are normalized and indexed into fast lookup structures, the date span is derived from minDate/maxDate or the data itself, and the renderer converts that timeline into a grid of cells. Each cell is painted according to contribution intensity, with optional month separators, weekday labels, and date numbers inside cells.
6. Utility code is split by concern. heatmap_utils.dart appears to handle date/grid calculations and month-splitting logic, heatmap_color_utils.dart maps counts to HeatmapColor palettes, and heatmap_localizations.dart handles locale-aware labels and translations. These utilities are the main computation layer beneath the render object.
7. The package exposes a small set of enums in lib/src/enum/, mainly HeatmapColor and WeekdayLabel. These control visual palette selection and weekday-label behavior, including the migration path from the older showWeekdayLabels boolean to the newer enum-based API.
8. Interaction is built into the rendering layer rather than added externally. Tap handling flows from hit testing in the custom render object to the onCellTap(DateTime, int) callback, so consumers can respond to user interaction without needing to wire up separate gesture widgets around the heatmap.
9. The repository includes a full example/ Flutter application scaffolded for Android, iOS, web, macOS, Linux, and Windows. That example is the integration reference for package users and demonstrates the widget in a real app shell across platforms.
10. There is also a separate contribution_heatmap_playground/ app, which is a web-focused interactive playground. Its role is product/demo infrastructure: users can experiment with settings, preview generated code, and visually inspect the widget without writing their own app first.
11. Testing is organized around the same subsystem boundaries as the library: model tests, utility tests, and widget/rendering tests under test/. That suggests the package’s risk areas are date math, color mapping, localization, and custom rendering behavior rather than business logic or backend integration.
12. CI/CD is lightweight and package-oriented. GitHub Actions workflows build and publish the package, while coverage is reported through Codecov. The repo’s lifecycle is therefore “library development → test/build → publish,” with no server-side runtime or persistent storage layer.
Main entry points: render_contribution_heatmap.dart Render heatmap · contribution_heatmap.dart Heatmap widget · contribution_heatmap_test.dart Library tests · main.dart Example app
Components 20
Library
Published Flutter package and its core rendering pipeline
- Public API · Package export surface for consumers
lib/contribution_heatmap.dart - Heatmap widget · Consumer-facing widget API and configuration boundary
lib/src/widgets/contribution_heatmap.dart - Contribution entry · Day-level contribution count input model
lib/src/models/contribution_entry.dart - Render heatmap · Custom layout, painting, and hit testing for the heatmap
lib/src/rendering/render_contribution_heatmap.dart - Heatmap utils · Timeline, grid, and month-splitting calculations
lib/src/utils/heatmap_utils.dart - Color utils · Maps contribution counts to heatmap colors
lib/src/utils/heatmap_color_utils.dart - Localizations · Locale-aware labels and weekday text
lib/src/utils/heatmap_localizations.dart - Heatmap color · Palette selection enum
lib/src/enum/heatmap_color.dart - Weekday label · Weekday-label behavior enum
lib/src/enum/weekday_label.dart
Example app
Multi-platform Flutter example used to demonstrate the package
- Example app · Multi-platform package demonstration shell
example/lib/main.dart - Android host · Android runner for the example app
example/android/app/src/main/kotlin/com/example/example/MainActivity.kt - iOS host · iOS runner for the example app
example/ios/Runner/AppDelegate.swift - Desktop hosts · Linux, macOS, and Windows runner shells for the example app
example/linux/runner/main.cc
Playground
Web-focused interactive demo and code preview app
- Playground app · Interactive web-focused playground shell
contribution_heatmap_playground/lib/main.dart - Playground screen · Interactive settings and preview screen
contribution_heatmap_playground/lib/playground_screen.dart - Code preview · Generates or displays sample code for the playground
contribution_heatmap_playground/lib/code_preview.dart - Random entries · Synthetic contribution data for playground exploration
contribution_heatmap_playground/lib/random_entries.dart
Quality and release
Tests, CI, and publication workflow
- Library tests · Model, utility, widget, and render coverage
test/contribution_heatmap_test.dart - Build workflow · Continuous integration build and validation
.github/workflows/build.yml - Publish workflow · Package publication workflow
.github/workflows/publish.yml
Connections 28
- Public API → Heatmap widget: exports · Public library surface exposes the widget API
- Heatmap widget → Contribution entry: consumes · Widget accepts contribution data as input
- Heatmap widget → Heatmap utils: derives layout · Widget delegates date-span and grid calculations
- Heatmap widget → Color utils: selects palette · Widget configuration flows into color mapping
- Heatmap widget → Localizations: localizes · Widget uses locale and weekday labeling helpers
- Heatmap widget → Render heatmap: builds · Widget instantiates the custom render object
- Render heatmap → Heatmap utils: lays out · Render object uses timeline and cell-grid calculations
- Render heatmap → Color utils: paints · Render object maps counts to painted cells
- Render heatmap → Localizations: labels · Render object draws locale-aware labels inside and around cells
- Render heatmap → Contribution entry: indexes · Render object reads normalized contribution entries for hit testing and painting
- Render heatmap → Heatmap color: configures · Palette selection is driven by the enum API
- Render heatmap → Weekday label: configures · Weekday label behavior is driven by the enum API
- Render heatmap → Heatmap widget: callbacks · Hit testing feeds tap events back through the widget boundary
- Example app → Heatmap widget: demonstrates · Example app uses the package widget in a real app shell
- Example app → Android host: runs on · Android platform host for the example
- Example app → iOS host: runs on · iOS platform host for the example
- Example app → Desktop hosts: runs on · Desktop platform hosts for the example
- Playground app → Playground screen: hosts · Playground entrypoint opens the interactive screen
- Playground screen → Heatmap widget: embeds · Playground previews the heatmap widget interactively
- Playground screen → Code preview: shows code · Screen presents generated or editable code snippets
- Playground screen → Random entries: generates data · Screen uses synthetic entries for experimentation
- Library tests → Contribution entry: covers · Tests verify model behavior
- Library tests → Heatmap utils: covers · Tests verify date and grid utilities
- Library tests → Color utils: covers · Tests verify color mapping behavior
- Library tests → Localizations: covers · Tests verify localization behavior
- Library tests → Render heatmap: covers · Tests exercise custom rendering behavior
- Build workflow → Library tests: runs · CI build validates the package through tests
- Publish workflow → Public API: releases · Publish workflow publishes the library package