Added showWeekLabels and showMonthLabels properties to heatmap

example/android/app/build.gradle

@@ -26,6 +26,7 @@ apply plugin: 'kotlin-android'
 apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle"
 
 android {
+    namespace "com.example.example"
     compileSdkVersion flutter.compileSdkVersion
 
     compileOptions {

example/android/build.gradle

@@ -1,12 +1,12 @@
 buildscript {
-    ext.kotlin_version = '1.3.50'
+    ext.kotlin_version = '1.9.10'
     repositories {
         google()
         mavenCentral()
     }
 
     dependencies {
-        classpath 'com.android.tools.build:gradle:4.1.0'
+        classpath 'com.android.tools.build:gradle:8.1.2'
         classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
     }
 }
@@ -26,6 +26,6 @@ subprojects {
     project.evaluationDependsOn(':app')
 }
 
-task clean(type: Delete) {
+tasks.register("clean", Delete) {
     delete rootProject.buildDir
 }

example/android/gradle/wrapper/gradle-wrapper.properties

@@ -3,4 +3,4 @@ distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-6.7-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.4-all.zip

example/lib/main.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:flutter_localizations/flutter_localizations.dart';
 import 'pages/heatmap_calendar_example.dart';
 import 'pages/heatmap_example.dart';
 
@@ -14,6 +15,11 @@ class MyApp extends StatelessWidget {
   Widget build(BuildContext context) {
     return MaterialApp(
       title: 'Flutter Heatmap Demo',
+      localizationsDelegates: GlobalMaterialLocalizations.delegates,
+      supportedLocales: const [
+        Locale('en', ''),
+        Locale('fr', ''),
+      ],
       theme: ThemeData(
         primarySwatch: Colors.blue,
       ),

example/lib/pages/heatmap_calendar_example.dart

@@ -49,61 +49,64 @@ class _HeatMapCalendarExample extends State<HeatMapCalendarExample> {
         title: const Text('Heatmap Calendar'),
       ),
       body: SafeArea(
-        child: Column(
-          children: [
-            Card(
-              margin: const EdgeInsets.all(20),
-              elevation: 20,
-              child: Padding(
-                padding: const EdgeInsets.all(20),
+        child: SingleChildScrollView(
+          child: Column(
+            children: [
+              Card(
+                margin: const EdgeInsets.all(20),
+                elevation: 20,
+                child: Padding(
+                  padding: const EdgeInsets.all(20),
 
-                // HeatMapCalendar
-                child: HeatMapCalendar(
-                  flexible: true,
-                  datasets: heatMapDatasets,
-                  colorMode:
-                      isOpacityMode ? ColorMode.opacity : ColorMode.color,
-                  colorsets: const {
-                    1: Colors.red,
-                    3: Colors.orange,
-                    5: Colors.yellow,
-                    7: Colors.green,
-                    9: Colors.blue,
-                    11: Colors.indigo,
-                    13: Colors.purple,
-                  },
+                  // HeatMapCalendar
+                  child: HeatMapCalendar(
+                    flexible: true,
+                    weekStartsWith: 1,
+                    datasets: heatMapDatasets,
+                    colorMode:
+                        isOpacityMode ? ColorMode.opacity : ColorMode.color,
+                    colorsets: const {
+                      1: Colors.red,
+                      3: Colors.orange,
+                      5: Colors.yellow,
+                      7: Colors.green,
+                      9: Colors.blue,
+                      11: Colors.indigo,
+                      13: Colors.purple,
+                    },
+                  ),
                 ),
               ),
-            ),
-            _textField('YYYYMMDD', dateController),
-            _textField('Heat Level', heatLevelController),
-            ElevatedButton(
-              child: const Text('COMMIT'),
-              onPressed: () {
-                setState(() {
-                  heatMapDatasets[DateTime.parse(dateController.text)] =
-                      int.parse(heatLevelController.text);
-                });
-              },
-            ),
+              _textField('YYYYMMDD', dateController),
+              _textField('Heat Level', heatLevelController),
+              ElevatedButton(
+                child: const Text('COMMIT'),
+                onPressed: () {
+                  setState(() {
+                    heatMapDatasets[DateTime.parse(dateController.text)] =
+                        int.parse(heatLevelController.text);
+                  });
+                },
+              ),
 
-            // ColorMode/OpacityMode Switch.
-            Row(
-              mainAxisAlignment: MainAxisAlignment.center,
-              children: <Widget>[
-                const Text('Color Mode'),
-                CupertinoSwitch(
-                  value: isOpacityMode,
-                  onChanged: (value) {
-                    setState(() {
-                      isOpacityMode = value;
-                    });
-                  },
-                ),
-                const Text('Opacity Mode'),
-              ],
-            ),
-          ],
+              // ColorMode/OpacityMode Switch.
+              Row(
+                mainAxisAlignment: MainAxisAlignment.center,
+                children: <Widget>[
+                  const Text('Color Mode'),
+                  CupertinoSwitch(
+                    value: isOpacityMode,
+                    onChanged: (value) {
+                      setState(() {
+                        isOpacityMode = value;
+                      });
+                    },
+                  ),
+                  const Text('Opacity Mode'),
+                ],
+              ),
+            ],
+          ),
         ),
       ),
       backgroundColor: Colors.white,

example/lib/pages/heatmap_example.dart

@@ -49,63 +49,67 @@ class _HeatMapExample extends State<HeatMapExample> {
         title: const Text('Heatmap'),
       ),
       body: SafeArea(
-        child: Column(
-          children: [
-            Card(
-              margin: const EdgeInsets.all(20),
-              elevation: 20,
-              child: Padding(
-                padding: const EdgeInsets.all(20),
-                child: HeatMap(
-                  scrollable: true,
-                  colorMode:
-                      isOpacityMode ? ColorMode.opacity : ColorMode.color,
-                  datasets: heatMapDatasets,
-                  colorsets: const {
-                    1: Colors.red,
-                    3: Colors.orange,
-                    5: Colors.yellow,
-                    7: Colors.green,
-                    9: Colors.blue,
-                    11: Colors.indigo,
-                    13: Colors.purple,
-                  },
-                  onClick: (value) {
-                    ScaffoldMessenger.of(context).showSnackBar(
-                        SnackBar(content: Text(value.toString())));
-                  },
+        child: SingleChildScrollView(
+          child: Column(
+            children: [
+              Card(
+                margin: const EdgeInsets.all(20),
+                elevation: 20,
+                child: Padding(
+                  padding: const EdgeInsets.all(20),
+                  child: HeatMap(
+                    scrollable: true,
+                    showText: true,
+                    weekStartsWith: 6,
+                    colorMode:
+                        isOpacityMode ? ColorMode.opacity : ColorMode.color,
+                    datasets: heatMapDatasets,
+                    colorsets: const {
+                      1: Colors.red,
+                      3: Colors.orange,
+                      5: Colors.yellow,
+                      7: Colors.green,
+                      9: Colors.blue,
+                      11: Colors.indigo,
+                      13: Colors.purple,
+                    },
+                    onClick: (value) {
+                      ScaffoldMessenger.of(context).showSnackBar(
+                          SnackBar(content: Text(value.toString())));
+                    },
+                  ),
                 ),
               ),
-            ),
-            _textField('YYYYMMDD', dateController),
-            _textField('Heat Level', heatLevelController),
-            ElevatedButton(
-              child: const Text('COMMIT'),
-              onPressed: () {
-                setState(() {
-                  heatMapDatasets[DateTime.parse(dateController.text)] =
-                      int.parse(heatLevelController.text);
-                });
-              },
-            ),
+              _textField('YYYYMMDD', dateController),
+              _textField('Heat Level', heatLevelController),
+              ElevatedButton(
+                child: const Text('COMMIT'),
+                onPressed: () {
+                  setState(() {
+                    heatMapDatasets[DateTime.parse(dateController.text)] =
+                        int.parse(heatLevelController.text);
+                  });
+                },
+              ),
 
-            // ColorMode/OpacityMode Switch.
-            Row(
-              mainAxisAlignment: MainAxisAlignment.center,
-              children: <Widget>[
-                const Text('Color Mode'),
-                CupertinoSwitch(
-                  value: isOpacityMode,
-                  onChanged: (value) {
-                    setState(() {
-                      isOpacityMode = value;
-                    });
-                  },
-                ),
-                const Text('Opacity Mode'),
-              ],
-            ),
-          ],
+              // ColorMode/OpacityMode Switch.
+              Row(
+                mainAxisAlignment: MainAxisAlignment.center,
+                children: <Widget>[
+                  const Text('Color Mode'),
+                  CupertinoSwitch(
+                    value: isOpacityMode,
+                    onChanged: (value) {
+                      setState(() {
+                        isOpacityMode = value;
+                      });
+                    },
+                  ),
+                  const Text('Opacity Mode'),
+                ],
+              ),
+            ],
+          ),
         ),
       ),
       backgroundColor: Colors.white,

example/pubspec.yaml

@@ -18,7 +18,7 @@ publish_to: "none" # Remove this line if you wish to publish to pub.dev
 version: 1.0.0+1
 
 environment:
-  sdk: ">=2.15.1 <3.0.0"
+  sdk: ">=2.15.1 <4.0.0"
 
 # Dependencies specify other packages that your package needs in order to work.
 # To automatically upgrade your package dependencies to the latest versions
@@ -29,12 +29,14 @@ environment:
 dependencies:
   flutter:
     sdk: flutter
+  flutter_localizations:
+    sdk: flutter
   flutter_heatmap_calendar:
     path: ../
 
   # The following adds the Cupertino Icons font to your application.
   # Use with the CupertinoIcons class for iOS style icons.
-  cupertino_icons: ^1.0.2
+  cupertino_icons:
 
 dev_dependencies:
   flutter_test:
@@ -45,7 +47,7 @@ dev_dependencies:
   # activated in the `analysis_options.yaml` file located at the root of your
   # package. See that file for information about deactivating specific lint
   # rules and activating additional ones.
-  flutter_lints: ^1.0.0
+  flutter_lints:
 
 # For information on the generic Dart part of this file, see the
 # following page: https://dart.dev/tools/pub/pubspec

lib/src/heatmap.dart

@@ -24,9 +24,12 @@ class HeatMap extends StatefulWidget {
   /// The color value of every block's default color.
   final Color? defaultColor;
 
-  /// The text color value of every blocks.
+  /// The text color value of every blocks into the heatmap.
   final Color? textColor;
 
+  /// The text color value for labels (months & week days).
+  final Color? labelColor;
+
   /// The double value of every block's size.
   final double? size;
 
@@ -87,13 +90,23 @@ class HeatMap extends StatefulWidget {
   /// The double value of [HeatMapColorTip]'s tip container's size.
   final double? colorTipSize;
 
+  /// Which day the week should start?
+  /// weekStartsWith = 1 for Monday, ..., weekStartsWith = 7 for Sunday.
+  /// Default to 7 (the week starts wih Sunday).
+  final int weekStartsWith;
+
+  final bool? showWeekText;
+
+  final bool? showMonthText;
+
   const HeatMap({
     Key? key,
     required this.colorsets,
     this.colorMode = ColorMode.opacity,
     this.startDate,
     this.endDate,
     this.textColor,
+    this.labelColor,
     this.size = 20,
     this.fontSize,
     this.onClick,
@@ -107,6 +120,9 @@ class HeatMap extends StatefulWidget {
     this.colorTipHelper,
     this.colorTipCount,
     this.colorTipSize,
+    this.weekStartsWith = 7,
+    this.showWeekText = true,
+    this.showMonthText = true,
   }) : super(key: key);
 
   @override
@@ -133,19 +149,22 @@ class _HeatMap extends State<HeatMap> {
         // Heatmap Widget.
         _scrollableHeatMap(HeatMapPage(
           endDate: widget.endDate ?? DateTime.now(),
-          startDate: widget.startDate ??
-              DateUtil.oneYearBefore(widget.endDate ?? DateTime.now()),
+          startDate: widget.startDate ?? DateUtil.oneYearBefore(widget.endDate ?? DateTime.now()),
           colorMode: widget.colorMode,
           size: widget.size,
           fontSize: widget.fontSize,
           datasets: widget.datasets,
           defaultColor: widget.defaultColor,
           textColor: widget.textColor,
+          labelColor: widget.labelColor,
           colorsets: widget.colorsets,
           borderRadius: widget.borderRadius,
           onClick: widget.onClick,
           margin: widget.margin,
           showText: widget.showText,
+          weekStartsWith: widget.weekStartsWith,
+          showWeekText: widget.showWeekText,
+          showMonthText: widget.showMonthText,
         )),
 
         // Show HeatMapColorTip if showColorTip is true.