Update LineChartSample5

CHANGELOG.md

@@ -6,6 +6,7 @@
 * **FEATURE** (by @Motionz-Von)BarChart groupSpace also takes effect when alignment is BarChartAlignment.end or BarChartAlignment.start.
 * **FEATURE** (by @Motionz-Von) supports setting line StrokeCap on HorizontalLine/VerticalLine
 * **BUGFIX** (by @nav-28) Fix radar chart tick and graph point not matching #1078
+* **IMPROVEMENT** (by @imaNNeo) Update LineChartSample5 to demonstrate click to toggle show/hide tooltip, #118
 
 ## 0.61.0
 * **IMPROVEMENT** (by @imaNNeo) Remove assertion to check to provide only one of `color` or `gradient` property in the [BarChartRodData](https://github.com/imaNNeo/fl_chart/blob/master/repo_files/documentations/bar_chart.md#barchartroddata) and [BackgroundBarChartRodData](https://github.com/imaNNeo/fl_chart/blob/master/repo_files/documentations/bar_chart.md#backgroundbarchartroddata), #1121.

example/lib/presentation/samples/line/line_chart_sample5.dart

@@ -2,7 +2,7 @@ import 'package:fl_chart_app/presentation/resources/app_resources.dart';
 import 'package:fl_chart/fl_chart.dart';
 import 'package:flutter/material.dart';
 
-class LineChartSample5 extends StatelessWidget {
+class LineChartSample5 extends StatefulWidget {
   const LineChartSample5({
     super.key,
     Color? gradientColor1,
@@ -19,7 +19,12 @@ class LineChartSample5 extends StatelessWidget {
   final Color gradientColor3;
   final Color indicatorStrokeColor;
 
-  List<int> get showIndexes => const [1, 3, 5];
+  @override
+  State<LineChartSample5> createState() => _LineChartSample5State();
+}
+
+class _LineChartSample5State extends State<LineChartSample5> {
+  List<int> showingTooltipOnSpots = [1, 3, 5];
 
   List<FlSpot> get allSpots => const [
         FlSpot(0, 1),
@@ -75,7 +80,7 @@ class LineChartSample5 extends StatelessWidget {
   Widget build(BuildContext context) {
     final lineBarsData = [
       LineChartBarData(
-        showingIndicators: showIndexes,
+        showingIndicators: showingTooltipOnSpots,
         spots: allSpots,
         isCurved: true,
         barWidth: 4,
@@ -86,18 +91,18 @@ class LineChartSample5 extends StatelessWidget {
           show: true,
           gradient: LinearGradient(
             colors: [
-              gradientColor1.withOpacity(0.4),
-              gradientColor2.withOpacity(0.4),
-              gradientColor3.withOpacity(0.4),
+              widget.gradientColor1.withOpacity(0.4),
+              widget.gradientColor2.withOpacity(0.4),
+              widget.gradientColor3.withOpacity(0.4),
             ],
           ),
         ),
         dotData: FlDotData(show: false),
         gradient: LinearGradient(
           colors: [
-            gradientColor1,
-            gradientColor2,
-            gradientColor3,
+            widget.gradientColor1,
+            widget.gradientColor2,
+            widget.gradientColor3,
           ],
           stops: const [0.1, 0.4, 0.9],
         ),
@@ -116,7 +121,7 @@ class LineChartSample5 extends StatelessWidget {
         child: LayoutBuilder(builder: (context, constraints) {
           return LineChart(
             LineChartData(
-              showingTooltipIndicators: showIndexes.map((index) {
+              showingTooltipIndicators: showingTooltipOnSpots.map((index) {
                 return ShowingTooltipIndicators([
                   LineBarSpot(
                     tooltipsOnBar,
@@ -126,7 +131,31 @@ class LineChartSample5 extends StatelessWidget {
                 ]);
               }).toList(),
               lineTouchData: LineTouchData(
-                enabled: false,
+                enabled: true,
+                handleBuiltInTouches: false,
+                touchCallback:
+                    (FlTouchEvent event, LineTouchResponse? response) {
+                  if (response == null || response.lineBarSpots == null) {
+                    return;
+                  }
+                  if (event is FlTapUpEvent) {
+                    final spotIndex = response.lineBarSpots!.first.spotIndex;
+                    setState(() {
+                      if (showingTooltipOnSpots.contains(spotIndex)) {
+                        showingTooltipOnSpots.remove(spotIndex);
+                      } else {
+                        showingTooltipOnSpots.add(spotIndex);
+                      }
+                    });
+                  }
+                },
+                mouseCursorResolver:
+                    (FlTouchEvent event, LineTouchResponse? response) {
+                  if (response == null || response.lineBarSpots == null) {
+                    return SystemMouseCursors.basic;
+                  }
+                  return SystemMouseCursors.click;
+                },
                 getTouchedSpotIndicator:
                     (LineChartBarData barData, List<int> spotIndexes) {
                   return spotIndexes.map((index) {
@@ -145,7 +174,7 @@ class LineChartSample5 extends StatelessWidget {
                             percent / 100,
                           ),
                           strokeWidth: 2,
-                          strokeColor: indicatorStrokeColor,
+                          strokeColor: widget.indicatorStrokeColor,
                         ),
                       ),
                     );