lineChart tooltip moved from roundedRadius to borderRadius

imaNNeo · Jan 19, 2025 · 7c2cedb · 7c2cedb
1 parent 32cfb79
commit 7c2cedb
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 12 deletions.
diff --git a/lib/src/chart/line_chart/line_chart_data.dart b/lib/src/chart/line_chart/line_chart_data.dart
@@ -1035,8 +1035,11 @@ class LineTouchTooltipData with EquatableMixin {
   /// if [LineTouchData.handleBuiltInTouches] is true,
   /// [LineChart] shows a tooltip popup on top of spots automatically when touch happens,
   /// otherwise you can show it manually using [LineChartData.showingTooltipIndicators].
-  /// Tooltip shows on top of spots, with [getTooltipColor] as a background color,
-  /// and you can set corner radius using [tooltipRoundedRadius].
+  /// Tooltip shows on top of rods, with [getTooltipColor] as a background color.
+  /// You can set the corner radius using [tooltipRoundedRadius],
+  /// or if you need a custom border, you can use [tooltipBorderRadius].
+  /// Note that if both [tooltipRoundedRadius] and [tooltipBorderRadius] are set,
+  /// the value from [tooltipBorderRadius] will be used.
   /// If you want to have a padding inside the tooltip, fill [tooltipPadding],
   /// or If you want to have a bottom margin, set [tooltipMargin].
   /// Content of the tooltip will provide using [getTooltipItems] callback, you can override it
@@ -1046,7 +1049,8 @@ class LineTouchTooltipData with EquatableMixin {
   /// you can set [fitInsideHorizontally] true to force it to shift inside the chart horizontally,
   /// also you can set [fitInsideVertically] true to force it to shift inside the chart vertically.
   const LineTouchTooltipData({
-    this.tooltipRoundedRadius = 4,
+    double? tooltipRoundedRadius = 4,
+    BorderRadius? tooltipBorderRadius,
     this.tooltipPadding =
         const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
     this.tooltipMargin = 16,
@@ -1060,11 +1064,19 @@ class LineTouchTooltipData with EquatableMixin {
     this.showOnTopOfTheChartBoxArea = false,
     this.rotateAngle = 0.0,
     this.tooltipBorder = BorderSide.none,
-  });
+  })  : tooltipRoundedRadius = tooltipRoundedRadius ?? 4,
+        _tooltipBorderRadius = tooltipBorderRadius;
 
   /// Sets a rounded radius for the tooltip.
+  @Deprecated('use tooltipBorderRadius instead')
   final double tooltipRoundedRadius;
 
+  /// Sets a border radius for the tooltip.
+  final BorderRadius? _tooltipBorderRadius;
+
+  BorderRadius get tooltipBorderRadius =>
+      _tooltipBorderRadius ?? BorderRadius.circular(tooltipRoundedRadius);
+
   /// Applies a padding for showing contents inside the tooltip.
   final EdgeInsets tooltipPadding;
 
@@ -1105,6 +1117,7 @@ class LineTouchTooltipData with EquatableMixin {
   @override
   List<Object?> get props => [
         tooltipRoundedRadius,
+        _tooltipBorderRadius,
         tooltipPadding,
         tooltipMargin,
         tooltipHorizontalAlignment,

diff --git a/lib/src/chart/line_chart/line_chart_painter.dart b/lib/src/chart/line_chart/line_chart_painter.dart
@@ -1225,13 +1225,12 @@ class LineChartPainter extends AxisChartPainter<LineChartData> {
       }
     }
 
-    final radius = Radius.circular(tooltipData.tooltipRoundedRadius);
     final roundedRect = RRect.fromRectAndCorners(
       rect,
-      topLeft: radius,
-      topRight: radius,
-      bottomLeft: radius,
-      bottomRight: radius,
+      topLeft: tooltipData.tooltipBorderRadius.topLeft,
+      topRight: tooltipData.tooltipBorderRadius.topRight,
+      bottomLeft: tooltipData.tooltipBorderRadius.bottomLeft,
+      bottomRight: tooltipData.tooltipBorderRadius.bottomRight,
     );
 
     var topSpot = showingTooltipSpots.showingSpots[0];

diff --git a/test/chart/line_chart/line_chart_painter_test.dart b/test/chart/line_chart/line_chart_painter_test.dart
@@ -2730,7 +2730,10 @@ void main() {
 
       final tooltipData = LineTouchTooltipData(
         getTooltipColor: (touchedSpot) => const Color(0x11111111),
-        tooltipRoundedRadius: 12,
+        tooltipBorderRadius: const BorderRadius.only(
+          topLeft: Radius.circular(10),
+          topRight: Radius.circular(8),
+        ),
         rotateAngle: 43,
         maxContentWidth: 100,
         tooltipMargin: 12,
@@ -2804,14 +2807,28 @@ void main() {
       final paint = result1.captured[1] as Paint;
       expect(
         rRect,
-        RRect.fromLTRBR(0, 40, 38, 78, const Radius.circular(12)),
+        RRect.fromLTRBAndCorners(
+          0,
+          40,
+          38,
+          78,
+          topLeft: const Radius.circular(10),
+          topRight: const Radius.circular(8),
+        ),
       );
       expect(paint.color, isSameColorAs(const Color(0x11111111)));
       final rRectBorder = result1.captured[2] as RRect;
       final paintBorder = result1.captured[3] as Paint;
       expect(
         rRectBorder,
-        RRect.fromLTRBR(0, 40, 38, 78, const Radius.circular(12)),
+        RRect.fromLTRBAndCorners(
+          0,
+          40,
+          38,
+          78,
+          topLeft: const Radius.circular(10),
+          topRight: const Radius.circular(8),
+        ),
       );
       expect(paintBorder.color, isSameColorAs(const Color(0x11111111)));
       expect(paintBorder.strokeWidth, 2);