Merge pull request imaNNeo#610 from jrc2139/improvement/tooltipitem-i…

…nlinespan-null-safety Add optional List<InlineSpan> parameter to BarTooltipItem, LineTooltipItem, ScatterTooltipItems for enhanced styling.
creky · Mar 22, 2021 · a4ee3a7 · a4ee3a7
2 parents e136667 + 1132716
commit a4ee3a7
Show file tree

Hide file tree

Showing 12 changed files with 139 additions and 15 deletions.
diff --git a/example/lib/bar_chart/samples/bar_chart_sample1.dart b/example/lib/bar_chart/samples/bar_chart_sample1.dart
@@ -177,7 +177,23 @@ class BarChartSample1State extends State<BarChartSample1> {
                   break;
               }
               return BarTooltipItem(
-                  weekDay + '\n' + (rod.y - 1).toString(), TextStyle(color: Colors.yellow));
+                weekDay + '\n',
+                TextStyle(
+                  color: Colors.white,
+                  fontWeight: FontWeight.bold,
+                  fontSize: 18,
+                ),
+                children: <InlineSpan>[
+                  TextSpan(
+                    text: (rod.y - 1).toString(),
+                    style: TextStyle(
+                      color: Colors.yellow,
+                      fontSize: 16,
+                      fontWeight: FontWeight.w500,
+                    ),
+                  ),
+                ],
+              );
             }),
         touchCallback: (barTouchResponse) {
           setState(() {

diff --git a/example/lib/line_chart/samples/line_chart_sample3.dart b/example/lib/line_chart/samples/line_chart_sample3.dart
@@ -91,8 +91,33 @@ class _LineChartSample3State extends State<LineChartSample3> {
                           }
 
                           return LineTooltipItem(
-                            '${widget.weekDays[flSpot.x.toInt()]} \n${flSpot.y} k calories',
-                            const TextStyle(color: Colors.white),
+                            '${widget.weekDays[flSpot.x.toInt()]} \n',
+                            const TextStyle(
+                              color: Colors.white,
+                              fontWeight: FontWeight.bold,
+                            ),
+                            children: [
+                              TextSpan(
+                                text: flSpot.y.toString(),
+                                style: TextStyle(
+                                  color: Colors.grey[100],
+                                  fontWeight: FontWeight.normal,
+                                ),
+                              ),
+                              TextSpan(
+                                text: ' k ',
+                                style: TextStyle(
+                                  fontStyle: FontStyle.italic,
+                                  fontWeight: FontWeight.normal,
+                                ),
+                              ),
+                              TextSpan(
+                                text: 'calories',
+                                style: TextStyle(
+                                  fontWeight: FontWeight.normal,
+                                ),
+                              ),
+                            ],
                           );
                         }).toList();
                       }),

diff --git a/example/lib/scatter_chart/samples/scatter_chart_sample2.dart b/example/lib/scatter_chart/samples/scatter_chart_sample2.dart
@@ -95,6 +95,43 @@ class _ScatterChartSample2State extends State {
               handleBuiltInTouches: false,
               touchTooltipData: ScatterTouchTooltipData(
                 tooltipBgColor: Colors.black,
+                getTooltipItems: (ScatterSpot touchedBarSpot) {
+                  return ScatterTooltipItem(
+                    'X: ',
+                    TextStyle(
+                      height: 1.2,
+                      color: Colors.grey[100],
+                      fontStyle: FontStyle.italic,
+                    ),
+                    10,
+                    children: [
+                      TextSpan(
+                        text: '${touchedBarSpot.x.toInt()} \n',
+                        style: TextStyle(
+                          color: Colors.white,
+                          fontStyle: FontStyle.normal,
+                          fontWeight: FontWeight.bold,
+                        ),
+                      ),
+                      TextSpan(
+                        text: 'Y: ',
+                        style: TextStyle(
+                          height: 1.2,
+                          color: Colors.grey[100],
+                          fontStyle: FontStyle.italic,
+                        ),
+                      ),
+                      TextSpan(
+                        text: touchedBarSpot.y.toInt().toString(),
+                        style: TextStyle(
+                          color: Colors.white,
+                          fontStyle: FontStyle.normal,
+                          fontWeight: FontWeight.bold,
+                        ),
+                      ),
+                    ],
+                  );
+                },
               ),
               touchCallback: (ScatterTouchResponse touchResponse) {
                 if (touchResponse.clickHappened && touchResponse.touchedSpot != null) {

diff --git a/lib/src/chart/bar_chart/bar_chart_data.dart b/lib/src/chart/bar_chart/bar_chart_data.dart
@@ -728,15 +728,24 @@ class BarTooltipItem with EquatableMixin {
   /// TextAlign of the showing content.
   final TextAlign textAlign;
 
-  /// content of the tooltip, is a [text] String with a [textStyle].
-  BarTooltipItem(this.text, this.textStyle, {this.textAlign = TextAlign.center});
+  /// List<TextSpan> add further style and format to the text of the tooltip
+  final List<TextSpan>? children;
+
+  /// content of the tooltip, is a [text] String with a [textStyle] and optional [children].
+  BarTooltipItem(
+    this.text,
+    this.textStyle, {
+    this.textAlign = TextAlign.center,
+    this.children,
+  });
 
   /// Used for equality check, see [EquatableMixin].
   @override
   List<Object?> get props => [
         text,
         textStyle,
         textAlign,
+        children,
       ];
 }
 

diff --git a/lib/src/chart/bar_chart/bar_chart_painter.dart b/lib/src/chart/bar_chart/bar_chart_painter.dart
@@ -499,7 +499,12 @@ class BarChartPainter extends AxisChartPainter<BarChartData> {
       return;
     }
 
-    final span = TextSpan(style: tooltipItem.textStyle, text: tooltipItem.text);
+    final span = TextSpan(
+      style: tooltipItem.textStyle,
+      text: tooltipItem.text,
+      children: tooltipItem.children,
+    );
+
     final tp = TextPainter(
         text: span,
         textAlign: tooltipItem.textAlign,

diff --git a/lib/src/chart/line_chart/line_chart_data.dart b/lib/src/chart/line_chart/line_chart_data.dart
@@ -1552,14 +1552,24 @@ class LineTooltipItem with EquatableMixin {
   /// Align of showing text.
   final TextAlign textAlign;
 
-  /// Shows a [text] with [textStyle] as a row in the tooltip popup.
-  LineTooltipItem(this.text, this.textStyle, {this.textAlign = TextAlign.center});
+  /// List<TextSpan> add further style and format to the text of the tooltip
+  final List<TextSpan>? children;
+
+  /// Shows a [text] with [textStyle] and optional [children] as a row in the tooltip popup.
+  LineTooltipItem(
+    this.text,
+    this.textStyle, {
+    this.textAlign = TextAlign.center,
+    this.children,
+  });
 
   /// Used for equality check, see [EquatableMixin].
   @override
   List<Object?> get props => [
         text,
         textStyle,
+        textAlign,
+        children,
       ];
 }
 

diff --git a/lib/src/chart/line_chart/line_chart_painter.dart b/lib/src/chart/line_chart/line_chart_painter.dart
@@ -1153,7 +1153,12 @@ class LineChartPainter extends AxisChartPainter<LineChartData> {
         continue;
       }
 
-      final span = TextSpan(style: tooltipItem.textStyle, text: tooltipItem.text);
+      final span = TextSpan(
+        style: tooltipItem.textStyle,
+        text: tooltipItem.text,
+        children: tooltipItem.children,
+      );
+
       final tp = TextPainter(
           text: span,
           textAlign: tooltipItem.textAlign,

diff --git a/lib/src/chart/scatter_chart/scatter_chart_data.dart b/lib/src/chart/scatter_chart/scatter_chart_data.dart
@@ -441,14 +441,22 @@ class ScatterTooltipItem with EquatableMixin {
   /// TextAlign of the showing content.
   final TextAlign textAlign;
 
-  /// Shows a [text] with [textStyle] in the tooltip popup,
+  /// List<TextSpan> add further style and format to the text of the tooltip
+  final List<TextSpan>? children;
+
+  /// Shows a [text] with [textStyle] and optional [children] in the tooltip popup,
   /// [bottomMargin] is the bottom space from spot.
-  ScatterTooltipItem(String text, TextStyle textStyle, double bottomMargin,
-      {TextAlign textAlign = TextAlign.center})
-      : text = text,
+  ScatterTooltipItem(
+    String text,
+    TextStyle textStyle,
+    double bottomMargin, {
+    TextAlign textAlign = TextAlign.center,
+    List<TextSpan>? children,
+  })  : text = text,
         textStyle = textStyle,
         bottomMargin = bottomMargin,
-        textAlign = textAlign;
+        textAlign = textAlign,
+        children = children;
 
   /// Used for equality check, see [EquatableMixin].
   @override
@@ -457,6 +465,7 @@ class ScatterTooltipItem with EquatableMixin {
         textStyle,
         bottomMargin,
         textAlign,
+        children,
       ];
 }
 

diff --git a/lib/src/chart/scatter_chart/scatter_chart_painter.dart b/lib/src/chart/scatter_chart/scatter_chart_painter.dart
@@ -253,7 +253,12 @@ class ScatterChartPainter extends AxisChartPainter<ScatterChartData> {
       return;
     }
 
-    final span = TextSpan(style: tooltipItem.textStyle, text: tooltipItem.text);
+    final span = TextSpan(
+      style: tooltipItem.textStyle,
+      text: tooltipItem.text,
+      children: tooltipItem.children,
+    );
+
     final drawingTextPainter = TextPainter(
         text: span,
         textAlign: tooltipItem.textAlign,

diff --git a/repo_files/documentations/bar_chart.md b/repo_files/documentations/bar_chart.md
@@ -106,6 +106,7 @@ enum values {`start`, `end`, `center`, `spaceEvenly`, `spaceAround`, `spaceBetwe
 |text|text string of each row in the tooltip bubble|null|
 |textStyle|[TextStyle](https://api.flutter.dev/flutter/dart-ui/TextStyle-class.html) of the showing text row|null|
 |textAlign|[TextAlign](https://api.flutter.dev/flutter/dart-ui/TextAlign-class.html) of the showing text row|TextAlign.center|
+|children|[List<TextSpan>](https://api.flutter.dev/flutter/painting/InlineSpan-class.html) pass additional InlineSpan children for a more advance tooltip|null|
 
 
 ### BarTouchResponse

diff --git a/repo_files/documentations/line_chart.md b/repo_files/documentations/line_chart.md
@@ -192,6 +192,7 @@ When you change the chart's state, it animates to the new state internally (usin
 |text|text string of each row in the tooltip bubble|null|
 |textStyle|[TextStyle](https://api.flutter.dev/flutter/dart-ui/TextStyle-class.html) of the showing text row|null|
 |textAlign|[TextStyle](https://api.flutter.dev/flutter/dart-ui/TextAlign-class.html) of the showing text row|TextAlign.center|
+|children|[List<TextSpan>](https://api.flutter.dev/flutter/painting/InlineSpan-class.html) pass additional InlineSpan children for a more advance tooltip|null|
 
 ### TouchedSpotIndicatorData
 |PropName|Description|default value|

diff --git a/repo_files/documentations/scatter_chart.md b/repo_files/documentations/scatter_chart.md
@@ -62,6 +62,7 @@ When you change the chart's state, it animates to the new state internally (usin
 |text|text string of each row in the tooltip bubble|null|
 |textStyle|[TextStyle](https://api.flutter.dev/flutter/dart-ui/TextStyle-class.html) of the showing text row|null|
 |bottomMargin| bottom margin of the tooltip (to the top of most top spot) | radius / 2|
+|children|[List<TextSpan>](https://api.flutter.dev/flutter/painting/InlineSpan-class.html) pass additional InlineSpan children for a more advance tooltip|null|
 
 
 ### ScatterTouchResponse