Add holeLabel and labelStyle

This commit is contained in:
Victor Choueiri 2018-03-21 02:36:07 +02:00 committed by Victor Choueiri
parent 8f9d553c22
commit 3ff0032e80
2 changed files with 68 additions and 5 deletions

View File

@ -24,8 +24,9 @@ class AnimatedCircularChart extends StatefulWidget {
this.percentageValues = false,
this.holeRadius,
this.startAngle = _kStartAngle,
})
: assert(size != null),
this.holeLabel,
this.labelStyle,
}) : assert(size != null),
super(key: key);
/// The size of the bounding box this chart will be constrained to.
@ -75,6 +76,20 @@ class AnimatedCircularChart extends StatefulWidget {
/// - 180.0: 9 o'clock
final double startAngle;
/// A label to show in the hole of a radial chart.
///
/// It is used to display the value of a radial slider, and it is displayed
/// in the center of the chart's hole.
///
/// See also [labelStyle] which is used to render the label.
final String holeLabel;
/// The style used when rendering the [holeLabel].
///
/// Defaults to the active [ThemeData]'s
/// [ThemeData.textTheme.body2] text style.
final TextStyle labelStyle;
/// The state from the closest instance of this class that encloses the given context.
///
/// This method is typically used by [AnimatedCircularChart] item widgets that insert or
@ -126,6 +141,7 @@ class AnimatedCircularChartState extends State<AnimatedCircularChart>
AnimationController _animation;
final Map<String, int> _stackRanks = <String, int>{};
final Map<String, int> _entryRanks = <String, int>{};
final TextPainter _labelPainter = new TextPainter();
@override
void initState() {
@ -153,6 +169,21 @@ class AnimatedCircularChartState extends State<AnimatedCircularChart>
_animation.forward();
}
@override
void didUpdateWidget(AnimatedCircularChart oldWidget) {
super.didUpdateWidget(oldWidget);
if (oldWidget.holeLabel != widget.holeLabel ||
oldWidget.labelStyle != widget.labelStyle) {
_updateLabelPainter();
}
}
@override
void didChangeDependencies() {
super.didChangeDependencies();
_updateLabelPainter();
}
@override
void dispose() {
_animation.dispose();
@ -168,6 +199,20 @@ class AnimatedCircularChartState extends State<AnimatedCircularChart>
}
}
void _updateLabelPainter() {
if (widget.holeLabel != null) {
TextStyle _labelStyle = widget.labelStyle ?? Theme.of(context).textTheme.body2;
_labelPainter
..text = new TextSpan(
style: _labelStyle, text: widget.holeLabel)
..textDirection = Directionality.of(context)
..textScaleFactor = MediaQuery.of(context).textScaleFactor
..layout();
} else {
_labelPainter.text = null;
}
}
/// Update the data this chart represents and start an animation that will tween
/// between the old data and this one.
void updateData(List<CircularStackEntry> data) {
@ -195,7 +240,10 @@ class AnimatedCircularChartState extends State<AnimatedCircularChart>
Widget build(BuildContext context) {
return new CustomPaint(
size: widget.size,
painter: new AnimatedCircularChartPainter(_tween.animate(_animation)),
painter: new AnimatedCircularChartPainter(
_tween.animate(_animation),
_labelPainter,
),
);
}
}

View File

@ -6,12 +6,20 @@ import 'package:flutter_circular_chart/src/circular_chart.dart';
import 'package:flutter_circular_chart/src/stack.dart';
class AnimatedCircularChartPainter extends CustomPainter {
AnimatedCircularChartPainter(this.animation) : super(repaint: animation);
AnimatedCircularChartPainter(this.animation, this.labelPainter)
: super(repaint: animation);
final Animation<CircularChart> animation;
final TextPainter labelPainter;
@override
void paint(Canvas canvas, Size size) {
labelPainter.paint(
canvas,
new Offset(
size.width / 2 - labelPainter.width / 2,
size.height / 2 - labelPainter.height / 2,
));
_paintChart(canvas, size, animation.value);
}
@ -20,12 +28,19 @@ class AnimatedCircularChartPainter extends CustomPainter {
}
class CircularChartPainter extends CustomPainter {
CircularChartPainter(this.chart);
CircularChartPainter(this.chart, this.labelPainter);
final CircularChart chart;
final TextPainter labelPainter;
@override
void paint(Canvas canvas, Size size) {
labelPainter.paint(
canvas,
new Offset(
size.width / 2 - labelPainter.width / 2,
size.height / 2 - labelPainter.height / 2,
));
_paintChart(canvas, size, chart);
}