Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Use the default theme available by the themeData for tooltips instead… #1464

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Use the default theme available by the themeData for tooltips instead… #1464

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f76cb4d
Use the default theme available by the themeData for tooltips instead…
devilk10 Oct 23, 2023
d0ea666
Use the default theme available by the themeData for tooltips for bar…
devilk10 Oct 23, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
* **BUGFIX** (by @imaNNeo) Fix Negative BarChartRodStackItem are not drawn correctly bug, #1347
* **BUGFIX** (by @imaNNeo) Fix bar_chart_helper minY calculation bug, #1388
* **IMPROVEMENT** (by @imaNNeo) Consider fraction digits when formatting chart side titles, #1267
* **IMPROVEMENT** (by @devilk10) Use the default theme available by the themeData for tooltips instead of color params #1464
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You need to add this line in the new version tag, for example create a ## newVersion section and add your changelog there
(Please read the contributing guideline carefully.


## 0.63.0
* **BUGFIX** (by @imaNNeo) Fix PieChart crash on web-renderer html by ignoring `sectionsSpace` when `Path.combine()` does not work (it's flutter engine [issue](https://github.com/flutter/flutter/issues/44572)), #955
Expand Down
13 changes: 11 additions & 2 deletions example/lib/presentation/samples/bar/bar_chart_sample1.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import 'dart:async';
import 'dart:math';

import 'package:fl_chart/fl_chart.dart';
import 'package:fl_chart_app/presentation/resources/app_resources.dart';
import 'package:fl_chart_app/util/extensions/color_extensions.dart';
import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';

class BarChartSample1 extends StatefulWidget {
Expand Down Expand Up @@ -162,7 +162,16 @@ class BarChartSample1State extends State<BarChartSample1> {
return BarChartData(
barTouchData: BarTouchData(
touchTooltipData: BarTouchTooltipData(
tooltipBgColor: Colors.blueGrey,
tooltipThemeData: const TooltipThemeData(
decoration: BoxDecoration(
color: Colors.blueGrey,
),
textStyle: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 18,
),
),
tooltipHorizontalAlignment: FLHorizontalAlignment.right,
tooltipMargin: -10,
getTooltipItem: (group, groupIndex, rod, rodIndex) {
Expand Down
10 changes: 8 additions & 2 deletions example/lib/presentation/samples/bar/bar_chart_sample2.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,16 @@
import 'package:fl_chart/fl_chart.dart';
import 'package:fl_chart_app/presentation/resources/app_resources.dart';
import 'package:fl_chart_app/util/extensions/color_extensions.dart';
import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';

class BarChartSample2 extends StatefulWidget {
BarChartSample2({super.key});

final Color leftBarColor = AppColors.contentColorYellow;
final Color rightBarColor = AppColors.contentColorRed;
final Color avgColor =
AppColors.contentColorOrange.avg(AppColors.contentColorRed);

@override
State<StatefulWidget> createState() => BarChartSample2State();
}
Expand Down Expand Up @@ -85,7 +87,11 @@ class BarChartSample2State extends State<BarChartSample2> {
maxY: 20,
barTouchData: BarTouchData(
touchTooltipData: BarTouchTooltipData(
tooltipBgColor: Colors.grey,
tooltipThemeData: const TooltipThemeData(
decoration: BoxDecoration(
color: Colors.grey,
),
),
getTooltipItem: (a, b, c, d) => null,
),
touchCallback: (FlTouchEvent event, response) {
Expand Down
8 changes: 6 additions & 2 deletions example/lib/presentation/samples/bar/bar_chart_sample3.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import 'package:fl_chart/fl_chart.dart';
import 'package:fl_chart_app/presentation/resources/app_resources.dart';
import 'package:fl_chart_app/util/extensions/color_extensions.dart';
import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';

class _BarChart extends StatelessWidget {
Expand All @@ -24,7 +24,11 @@ class _BarChart extends StatelessWidget {
BarTouchData get barTouchData => BarTouchData(
enabled: false,
touchTooltipData: BarTouchTooltipData(
tooltipBgColor: Colors.transparent,
tooltipThemeData: const TooltipThemeData(
decoration: BoxDecoration(
color: Colors.transparent,
),
),
tooltipPadding: EdgeInsets.zero,
tooltipMargin: 8,
getTooltipItem: (
Expand Down
6 changes: 5 additions & 1 deletion example/lib/presentation/samples/bar/bar_chart_sample7.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,11 @@ class _BarChartSample7State extends State<BarChartSample7> {
enabled: true,
handleBuiltInTouches: false,
touchTooltipData: BarTouchTooltipData(
tooltipBgColor: Colors.transparent,
tooltipThemeData: const TooltipThemeData(
decoration: BoxDecoration(
color: Colors.transparent,
),
),
tooltipMargin: 0,
getTooltipItem: (
BarChartGroupData group,
Expand Down
11 changes: 4 additions & 7 deletions lib/src/chart/bar_chart/bar_chart_data.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import 'dart:ui';
import 'package:equatable/equatable.dart';
import 'package:fl_chart/fl_chart.dart';
import 'package:fl_chart/src/chart/bar_chart/bar_chart_helper.dart';
import 'package:fl_chart/src/extensions/color_extension.dart';
import 'package:fl_chart/src/utils/lerp.dart';
import 'package:fl_chart/src/utils/utils.dart';
import 'package:flutter/material.dart';
Expand Down Expand Up @@ -692,7 +691,6 @@ class BarTouchTooltipData 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.
BarTouchTooltipData({
Color? tooltipBgColor,
double? tooltipRoundedRadius,
EdgeInsets? tooltipPadding,
double? tooltipMargin,
Expand All @@ -705,8 +703,8 @@ class BarTouchTooltipData with EquatableMixin {
TooltipDirection? direction,
double? rotateAngle,
BorderSide? tooltipBorder,
}) : tooltipBgColor = tooltipBgColor ?? Colors.blueGrey.darken(15),
tooltipRoundedRadius = tooltipRoundedRadius ?? 4,
this.tooltipThemeData,
}) : tooltipRoundedRadius = tooltipRoundedRadius ?? 4,
tooltipPadding = tooltipPadding ??
const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
tooltipMargin = tooltipMargin ?? 16,
Expand All @@ -722,8 +720,8 @@ class BarTouchTooltipData with EquatableMixin {
tooltipBorder = tooltipBorder ?? BorderSide.none,
super();

/// The tooltip background color.
final Color tooltipBgColor;
/// The tooltip background color and text decoration.
final TooltipThemeData? tooltipThemeData;

/// Sets a rounded radius for the tooltip.
final double tooltipRoundedRadius;
Expand Down Expand Up @@ -764,7 +762,6 @@ class BarTouchTooltipData with EquatableMixin {
/// Used for equality check, see [EquatableMixin].
@override
List<Object?> get props => [
tooltipBgColor,
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You need to add tooltipThemeData instead

tooltipRoundedRadius,
tooltipPadding,
tooltipMargin,
Expand Down
23 changes: 21 additions & 2 deletions lib/src/chart/bar_chart/bar_chart_painter.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
import 'package:fl_chart/src/chart/base/axis_chart/axis_chart_painter.dart';
import 'package:fl_chart/src/chart/base/base_chart/base_chart_painter.dart';
import 'package:fl_chart/src/extensions/bar_chart_data_extension.dart';
import 'package:fl_chart/src/extensions/color_extension.dart';
import 'package:fl_chart/src/extensions/paint_extension.dart';
import 'package:fl_chart/src/extensions/rrect_extension.dart';
import 'package:fl_chart/src/utils/canvas_wrapper.dart';
Expand Down Expand Up @@ -34,6 +35,7 @@
..color = Colors.transparent
..strokeWidth = 1.0;
}

late Paint _barPaint;
late Paint _barStrokePaint;
late Paint _bgTouchTooltipPaint;
Expand Down Expand Up @@ -348,8 +350,25 @@
return;
}

final decoration = tooltipData.tooltipThemeData?.decoration;
final textStyle = tooltipData.tooltipThemeData?.textStyle;
Color? bgColor;
if (decoration != null) {
switch (decoration.runtimeType) {
case BoxDecoration:
bgColor = (decoration as BoxDecoration).color;
case ShapeDecoration:
bgColor = (decoration as ShapeDecoration).color;

Check warning on line 361 in lib/src/chart/bar_chart/bar_chart_painter.dart

View check run for this annotation

Codecov / codecov/patch

lib/src/chart/bar_chart/bar_chart_painter.dart#L360-L361 

Added lines #L360 - L361 were not covered by tests
default:
throw UnsupportedError(
'Unsupported decoration type: ${decoration.runtimeType}',

Check warning on line 364 in lib/src/chart/bar_chart/bar_chart_painter.dart

View check run for this annotation

Codecov / codecov/patch

lib/src/chart/bar_chart/bar_chart_painter.dart#L363-L364 

Added lines #L363 - L364 were not covered by tests
);
}
}
_bgTouchTooltipPaint.color = bgColor ?? Colors.blueGrey.darken(15);

final span = TextSpan(
style: Utils().getThemeAwareTextStyle(context, tooltipItem.textStyle),
style: Utils().getThemeAwareTextStyle(context, textStyle),
text: tooltipItem.text,
children: tooltipItem.children,
);
Expand Down Expand Up @@ -463,7 +482,6 @@
bottomLeft: radius,
bottomRight: radius,
);
_bgTouchTooltipPaint.color = tooltipData.tooltipBgColor;

final rotateAngle = tooltipData.rotateAngle;
final rectRotationOffset =
Expand Down Expand Up @@ -704,6 +722,7 @@
@visibleForTesting
class GroupBarsPosition {
GroupBarsPosition(this.groupX, this.barsX);

final double groupX;
final List<double> barsX;
}
17 changes: 14 additions & 3 deletions test/chart/bar_chart/bar_chart_painter_test.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -853,8 +853,11 @@ void main() {
];

final tooltipData = BarTouchTooltipData(
tooltipThemeData: const TooltipThemeData(
decoration: BoxDecoration(color: Color(0xf33f33f3)),
textStyle: textStyle1,
),
tooltipRoundedRadius: 8,
tooltipBgColor: const Color(0xf33f33f3),
maxContentWidth: 80,
rotateAngle: 12,
tooltipBorder: const BorderSide(color: Color(0xf33f33f3), width: 2),
Expand Down Expand Up @@ -1046,7 +1049,11 @@ void main() {

final tooltipData = BarTouchTooltipData(
tooltipRoundedRadius: 8,
tooltipBgColor: const Color(0xf33f33f3),
tooltipThemeData: const TooltipThemeData(
decoration: BoxDecoration(
color: Color(0xf33f33f3),
),
),
maxContentWidth: 80,
rotateAngle: 12,
direction: TooltipDirection.bottom,
Expand Down Expand Up @@ -1212,7 +1219,11 @@ void main() {

final tooltipData = BarTouchTooltipData(
tooltipRoundedRadius: 8,
tooltipBgColor: const Color(0xf33f33f3),
tooltipThemeData: const TooltipThemeData(
decoration: BoxDecoration(
color: Color(0xf33f33f3),
),
),
maxContentWidth: 8000,
rotateAngle: 12,
fitInsideHorizontally: true,
Expand Down
12 changes: 0 additions & 12 deletions test/chart/data_pool.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2714,7 +2714,6 @@ final BarTouchTooltipData barTouchTooltipData1 = BarTouchTooltipData(
fitInsideVertically: false,
fitInsideHorizontally: true,
maxContentWidth: 23,
tooltipBgColor: Colors.green,
tooltipPadding: const EdgeInsets.all(23),
getTooltipItem: getTooltipItem,
tooltipMargin: 12,
Expand All @@ -2725,7 +2724,6 @@ final BarTouchTooltipData barTouchTooltipData1Clone = BarTouchTooltipData(
fitInsideVertically: false,
fitInsideHorizontally: true,
maxContentWidth: 23,
tooltipBgColor: Colors.green,
tooltipPadding: const EdgeInsets.all(23),
getTooltipItem: getTooltipItem,
tooltipMargin: 12,
Expand All @@ -2736,7 +2734,6 @@ final BarTouchTooltipData barTouchTooltipData2 = BarTouchTooltipData(
fitInsideVertically: false,
fitInsideHorizontally: true,
maxContentWidth: 23,
tooltipBgColor: Colors.green,
tooltipPadding: const EdgeInsets.all(23),
getTooltipItem: getTooltipItem,
tooltipMargin: 12,
Expand All @@ -2748,7 +2745,6 @@ final BarTouchTooltipData barTouchTooltipData3 = BarTouchTooltipData(
fitInsideVertically: true,
fitInsideHorizontally: true,
maxContentWidth: 23,
tooltipBgColor: Colors.green,
tooltipPadding: const EdgeInsets.all(23),
getTooltipItem: getTooltipItem,
tooltipMargin: 12,
Expand All @@ -2760,7 +2756,6 @@ final BarTouchTooltipData barTouchTooltipData4 = BarTouchTooltipData(
fitInsideVertically: false,
fitInsideHorizontally: false,
maxContentWidth: 23,
tooltipBgColor: Colors.green,
tooltipPadding: const EdgeInsets.all(23),
getTooltipItem: getTooltipItem,
tooltipMargin: 12,
Expand All @@ -2772,7 +2767,6 @@ final BarTouchTooltipData barTouchTooltipData5 = BarTouchTooltipData(
fitInsideVertically: false,
fitInsideHorizontally: true,
maxContentWidth: 23.00001,
tooltipBgColor: Colors.green,
tooltipPadding: const EdgeInsets.all(23),
getTooltipItem: getTooltipItem,
tooltipMargin: 12,
Expand All @@ -2785,7 +2779,6 @@ final BarTouchTooltipData barTouchTooltipData6 = BarTouchTooltipData(
fitInsideVertically: false,
fitInsideHorizontally: true,
maxContentWidth: 23,
tooltipBgColor: Colors.blue,
tooltipPadding: const EdgeInsets.all(23),
getTooltipItem: getTooltipItem,
tooltipMargin: 12,
Expand All @@ -2798,7 +2791,6 @@ final BarTouchTooltipData barTouchTooltipData7 = BarTouchTooltipData(
fitInsideVertically: false,
fitInsideHorizontally: true,
maxContentWidth: 23,
tooltipBgColor: Colors.green,
getTooltipItem: getTooltipItem,
tooltipMargin: 12,
tooltipBorder: const BorderSide(color: Colors.red),
Expand All @@ -2810,7 +2802,6 @@ final BarTouchTooltipData barTouchTooltipData8 = BarTouchTooltipData(
fitInsideVertically: false,
fitInsideHorizontally: true,
maxContentWidth: 23,
tooltipBgColor: Colors.green,
tooltipPadding: const EdgeInsets.all(23),
tooltipMargin: 12,
tooltipBorder: const BorderSide(color: Colors.red),
Expand All @@ -2820,7 +2811,6 @@ final BarTouchTooltipData barTouchTooltipData9 = BarTouchTooltipData(
fitInsideVertically: false,
fitInsideHorizontally: true,
maxContentWidth: 23,
tooltipBgColor: Colors.green,
tooltipPadding: const EdgeInsets.all(23),
getTooltipItem: getTooltipItem,
tooltipMargin: 333,
Expand All @@ -2831,7 +2821,6 @@ final BarTouchTooltipData barTouchTooltipData10 = BarTouchTooltipData(
fitInsideVertically: false,
fitInsideHorizontally: true,
maxContentWidth: 23,
tooltipBgColor: Colors.green,
tooltipPadding: const EdgeInsets.all(23),
getTooltipItem: getTooltipItem,
tooltipMargin: 12,
Expand All @@ -2842,7 +2831,6 @@ final BarTouchTooltipData barTouchTooltipData11 = BarTouchTooltipData(
fitInsideVertically: false,
fitInsideHorizontally: true,
maxContentWidth: 23,
tooltipBgColor: Colors.green,
tooltipPadding: const EdgeInsets.all(23),
getTooltipItem: getTooltipItem,
tooltipMargin: 12,
Expand Down