sphericalkat/flutter_circular_chart
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

general update

Browse Source
This commit is contained in:
Gustavo Rodrigues 2021-03-08 12:37:23 -05:00
parent 6755e96f06
commit 43a1d9b47d
13 changed files with 158 additions and 191 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
README.md
View File

@ -31,25 +31,25 @@ Install the latest version [from pub](https://pub.dartlang.org/packages/flutter_
Import the package: Import the package:
```dart ```dart
import 'package:flutter_circular_chart/flutter_circular_chart.dart'; import 'package:flutter_circular_chart_two/flutter_circular_chart.dart';
``` ```
Create a [GlobalKey](https://docs.flutter.io/flutter/widgets/GlobalKey-class.html) to be able to access the chart and update its data: Create a [GlobalKey](https://docs.flutter.io/flutter/widgets/GlobalKey-class.html) to be able to access the chart and update its data:
```dart ```dart
final GlobalKey<AnimatedCircularChartState> _chartKey = new GlobalKey<AnimatedCircularChartState>(); final GlobalKey<AnimatedCircularChartState> _chartKey = GlobalKey<AnimatedCircularChartState>();
``` ```
Create chart data entry objects: Create chart data entry objects:
```dart ```dart
List<CircularStackEntry> data = <CircularStackEntry>[ List<CircularStackEntry> data = <CircularStackEntry>[
new CircularStackEntry( CircularStackEntry(
<CircularSegmentEntry>[ <CircularSegmentEntry>[
new CircularSegmentEntry(500.0, Colors.red[200], rankKey: 'Q1'), CircularSegmentEntry(500.0, Colors.red[200], rankKey: 'Q1'),
new CircularSegmentEntry(1000.0, Colors.green[200], rankKey: 'Q2'), CircularSegmentEntry(1000.0, Colors.green[200], rankKey: 'Q2'),
new CircularSegmentEntry(2000.0, Colors.blue[200], rankKey: 'Q3'), CircularSegmentEntry(2000.0, Colors.blue[200], rankKey: 'Q3'),
new CircularSegmentEntry(1000.0, Colors.yellow[200], rankKey: 'Q4'), CircularSegmentEntry(1000.0, Colors.yellow[200], rankKey: 'Q4'),
], ],
rankKey: 'Quarterly Profits', rankKey: 'Quarterly Profits',
), ),
@ -61,7 +61,7 @@ Create an `AnimatedCircularChart`, passing it the `_chartKey` and initial `data`
```dart ```dart
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return new AnimatedCircularChart( return AnimatedCircularChart(
key: _chartKey, key: _chartKey,
size: const Size(300.0, 300.0), size: const Size(300.0, 300.0),
initialChartData: data, initialChartData: data,
@ -75,12 +75,12 @@ Call `updateData` to animate the chart:
```dart ```dart
void _cycleSamples() { void _cycleSamples() {
List<CircularStackEntry> nextData = <CircularStackEntry>[ List<CircularStackEntry> nextData = <CircularStackEntry>[
new CircularStackEntry( CircularStackEntry(
<CircularSegmentEntry>[ <CircularSegmentEntry>[
new CircularSegmentEntry(1500.0, Colors.red[200], rankKey: 'Q1'), CircularSegmentEntry(1500.0, Colors.red[200], rankKey: 'Q1'),
new CircularSegmentEntry(750.0, Colors.green[200], rankKey: 'Q2'), CircularSegmentEntry(750.0, Colors.green[200], rankKey: 'Q2'),
new CircularSegmentEntry(2000.0, Colors.blue[200], rankKey: 'Q3'), CircularSegmentEntry(2000.0, Colors.blue[200], rankKey: 'Q3'),
new CircularSegmentEntry(1000.0, Colors.yellow[200], rankKey: 'Q4'), CircularSegmentEntry(1000.0, Colors.yellow[200], rankKey: 'Q4'),
], ],
rankKey: 'Quarterly Profits', rankKey: 'Quarterly Profits',
), ),
@ -103,18 +103,18 @@ void _cycleSamples() {
Example: Example:
```dart ```dart
new AnimatedCircularChart( AnimatedCircularChart(
key: _chartKey, key: _chartKey,
size: _chartSize, size: _chartSize,
initialChartData: <CircularStackEntry>[ initialChartData: <CircularStackEntry>[
new CircularStackEntry( CircularStackEntry(
<CircularSegmentEntry>[ <CircularSegmentEntry>[
new CircularSegmentEntry( CircularSegmentEntry(
33.33, 33.33,
Colors.blue[400], Colors.blue[400],
rankKey: 'completed', rankKey: 'completed',
), ),
new CircularSegmentEntry( CircularSegmentEntry(
66.67, 66.67,
Colors.blueGrey[600], Colors.blueGrey[600],
rankKey: 'remaining', rankKey: 'remaining',
@ -126,7 +126,7 @@ new AnimatedCircularChart(
chartType: CircularChartType.Radial, chartType: CircularChartType.Radial,
percentageValues: true, percentageValues: true,
holeLabel: '1/3', holeLabel: '1/3',
labelStyle: new TextStyle( labelStyle: TextStyle(
color: Colors.blueGrey[600], color: Colors.blueGrey[600],
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
fontSize: 24.0, fontSize: 24.0,
@ -152,18 +152,18 @@ new AnimatedCircularChart(
Example: Example:
```dart ```dart
new AnimatedCircularChart( AnimatedCircularChart(
key: _chartKey, key: _chartKey,
size: _chartSize, size: _chartSize,
initialChartData: <CircularStackEntry>[ initialChartData: <CircularStackEntry>[
new CircularStackEntry( CircularStackEntry(
<CircularSegmentEntry>[ <CircularSegmentEntry>[
new CircularSegmentEntry( CircularSegmentEntry(
33.33, 33.33,
Colors.blue[400], Colors.blue[400],
rankKey: 'completed', rankKey: 'completed',
), ),
new CircularSegmentEntry( CircularSegmentEntry(
66.67, 66.67,
Colors.blueGrey[600], Colors.blueGrey[600],
rankKey: 'remaining', rankKey: 'remaining',

54
example/animated_pie_chart_example.dart
View File

@ -1,42 +1,42 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_circular_chart/flutter_circular_chart.dart'; import 'package:flutter_circular_chart_two/flutter_circular_chart.dart';
void main() { void main() {
runApp(new MaterialApp( runApp(MaterialApp(
home: new AnimatedPieChartExample(), home: AnimatedPieChartExample(),
)); ));
} }
final List<List<CircularStackEntry>> _quarterlyProfitPieData = [ final List<List<CircularStackEntry>> _quarterlyProfitPieData = [
<CircularStackEntry>[ <CircularStackEntry>[
new CircularStackEntry( CircularStackEntry(
<CircularSegmentEntry>[ <CircularSegmentEntry>[
new CircularSegmentEntry(500.0, Colors.red[200], rankKey: 'Q1'), CircularSegmentEntry(500.0, Colors.red[200], rankKey: 'Q1'),
new CircularSegmentEntry(1000.0, Colors.green[200], rankKey: 'Q2'), CircularSegmentEntry(1000.0, Colors.green[200], rankKey: 'Q2'),
new CircularSegmentEntry(2000.0, Colors.blue[200], rankKey: 'Q3'), CircularSegmentEntry(2000.0, Colors.blue[200], rankKey: 'Q3'),
new CircularSegmentEntry(1000.0, Colors.yellow[200], rankKey: 'Q4'), CircularSegmentEntry(1000.0, Colors.yellow[200], rankKey: 'Q4'),
], ],
rankKey: 'Quarterly Profits', rankKey: 'Quarterly Profits',
), ),
], ],
<CircularStackEntry>[ <CircularStackEntry>[
new CircularStackEntry( CircularStackEntry(
<CircularSegmentEntry>[ <CircularSegmentEntry>[
new CircularSegmentEntry(1500.0, Colors.red[200], rankKey: 'Q1'), CircularSegmentEntry(1500.0, Colors.red[200], rankKey: 'Q1'),
new CircularSegmentEntry(750.0, Colors.green[200], rankKey: 'Q2'), CircularSegmentEntry(750.0, Colors.green[200], rankKey: 'Q2'),
new CircularSegmentEntry(2000.0, Colors.blue[200], rankKey: 'Q3'), CircularSegmentEntry(2000.0, Colors.blue[200], rankKey: 'Q3'),
new CircularSegmentEntry(1000.0, Colors.yellow[200], rankKey: 'Q4'), CircularSegmentEntry(1000.0, Colors.yellow[200], rankKey: 'Q4'),
], ],
rankKey: 'Quarterly Profits', rankKey: 'Quarterly Profits',
), ),
], ],
<CircularStackEntry>[ <CircularStackEntry>[
new CircularStackEntry( CircularStackEntry(
<CircularSegmentEntry>[ <CircularSegmentEntry>[
new CircularSegmentEntry(1800.0, Colors.red[200], rankKey: 'Q1'), CircularSegmentEntry(1800.0, Colors.red[200], rankKey: 'Q1'),
new CircularSegmentEntry(2900.0, Colors.green[200], rankKey: 'Q2'), CircularSegmentEntry(2900.0, Colors.green[200], rankKey: 'Q2'),
new CircularSegmentEntry(4000.0, Colors.blue[200], rankKey: 'Q3'), CircularSegmentEntry(4000.0, Colors.blue[200], rankKey: 'Q3'),
new CircularSegmentEntry(7000.0, Colors.yellow[200], rankKey: 'Q4'), CircularSegmentEntry(7000.0, Colors.yellow[200], rankKey: 'Q4'),
], ],
rankKey: 'Quarterly Profits', rankKey: 'Quarterly Profits',
), ),
@ -45,13 +45,11 @@ final List<List<CircularStackEntry>> _quarterlyProfitPieData = [
class AnimatedPieChartExample extends StatefulWidget { class AnimatedPieChartExample extends StatefulWidget {
@override @override
_AnimatedPieChartExampleState createState() => _AnimatedPieChartExampleState createState() => _AnimatedPieChartExampleState();
new _AnimatedPieChartExampleState();
} }
class _AnimatedPieChartExampleState extends State<AnimatedPieChartExample> { class _AnimatedPieChartExampleState extends State<AnimatedPieChartExample> {
final GlobalKey<AnimatedCircularChartState> _chartKey = final GlobalKey<AnimatedCircularChartState> _chartKey = GlobalKey<AnimatedCircularChartState>();
new GlobalKey<AnimatedCircularChartState>();
final _chartSize = const Size(300.0, 300.0); final _chartSize = const Size(300.0, 300.0);
int sampleIndex = 0; int sampleIndex = 0;
@ -65,20 +63,20 @@ class _AnimatedPieChartExampleState extends State<AnimatedPieChartExample> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return new Scaffold( return Scaffold(
appBar: new AppBar( appBar: AppBar(
title: const Text('Quarterly Profit'), title: const Text('Quarterly Profit'),
), ),
body: new Center( body: Center(
child: new AnimatedCircularChart( child: AnimatedCircularChart(
key: _chartKey, key: _chartKey,
size: _chartSize, size: _chartSize,
initialChartData: _quarterlyProfitPieData[0], initialChartData: _quarterlyProfitPieData[0],
chartType: CircularChartType.Pie, chartType: CircularChartType.Pie,
), ),
), ),
floatingActionButton: new FloatingActionButton( floatingActionButton: FloatingActionButton(
child: new Icon(Icons.refresh), child: Icon(Icons.refresh),
onPressed: _cycleSamples, onPressed: _cycleSamples,
), ),
); );

46
example/animated_radial_chart_example.dart
View File

@ -1,22 +1,19 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_circular_chart/flutter_circular_chart.dart'; import 'package:flutter_circular_chart_two/flutter_circular_chart.dart';
void main() { void main() {
runApp(new MaterialApp( runApp(MaterialApp(
home: new AnimatedRadialChartExample(), home: AnimatedRadialChartExample(),
)); ));
} }
class AnimatedRadialChartExample extends StatefulWidget { class AnimatedRadialChartExample extends StatefulWidget {
@override @override
_AnimatedRadialChartExampleState createState() => _AnimatedRadialChartExampleState createState() => _AnimatedRadialChartExampleState();
new _AnimatedRadialChartExampleState();
} }
class _AnimatedRadialChartExampleState class _AnimatedRadialChartExampleState extends State<AnimatedRadialChartExample> {
extends State<AnimatedRadialChartExample> { final GlobalKey<AnimatedCircularChartState> _chartKey = GlobalKey<AnimatedCircularChartState>();
final GlobalKey<AnimatedCircularChartState> _chartKey =
new GlobalKey<AnimatedCircularChartState>();
final _chartSize = const Size(200.0, 200.0); final _chartSize = const Size(200.0, 200.0);
double value = 50.0; double value = 50.0;
@ -48,9 +45,9 @@ class _AnimatedRadialChartExampleState
labelColor = dialColor; labelColor = dialColor;
List<CircularStackEntry> data = <CircularStackEntry>[ List<CircularStackEntry> data = <CircularStackEntry>[
new CircularStackEntry( CircularStackEntry(
<CircularSegmentEntry>[ <CircularSegmentEntry>[
new CircularSegmentEntry( CircularSegmentEntry(
value, value,
dialColor, dialColor,
rankKey: 'percentage', rankKey: 'percentage',
@ -63,9 +60,9 @@ class _AnimatedRadialChartExampleState
if (value > 100) { if (value > 100) {
labelColor = Colors.green[200]; labelColor = Colors.green[200];
data.add(new CircularStackEntry( data.add(CircularStackEntry(
<CircularSegmentEntry>[ <CircularSegmentEntry>[
new CircularSegmentEntry( CircularSegmentEntry(
value - 100, value - 100,
Colors.green[200], Colors.green[200],
rankKey: 'percentage', rankKey: 'percentage',
@ -80,20 +77,17 @@ class _AnimatedRadialChartExampleState
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
TextStyle _labelStyle = Theme TextStyle _labelStyle =
.of(context) Theme.of(context).textTheme.headline6.merge(TextStyle(color: labelColor));
.textTheme
.title
.merge(new TextStyle(color: labelColor));
return new Scaffold( return Scaffold(
appBar: new AppBar( appBar: AppBar(
title: const Text('Percentage Dial'), title: const Text('Percentage Dial'),
), ),
body: new Column( body: Column(
children: <Widget>[ children: <Widget>[
new Container( Container(
child: new AnimatedCircularChart( child: AnimatedCircularChart(
key: _chartKey, key: _chartKey,
size: _chartSize, size: _chartSize,
initialChartData: _generateChartData(value), initialChartData: _generateChartData(value),
@ -104,17 +98,17 @@ class _AnimatedRadialChartExampleState
labelStyle: _labelStyle, labelStyle: _labelStyle,
), ),
), ),
new Row( Row(
mainAxisAlignment: MainAxisAlignment.spaceAround, mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[ children: <Widget>[
new RaisedButton( RaisedButton(
onPressed: _decrement, onPressed: _decrement,
child: const Icon(Icons.remove), child: const Icon(Icons.remove),
shape: const CircleBorder(), shape: const CircleBorder(),
color: Colors.red[200], color: Colors.red[200],
textColor: Colors.white, textColor: Colors.white,
), ),
new RaisedButton( RaisedButton(
onPressed: _increment, onPressed: _increment,
child: const Icon(Icons.add), child: const Icon(Icons.add),
shape: const CircleBorder(), shape: const CircleBorder(),

35
example/animated_random_radial_chart_example.dart
View File

@ -1,27 +1,24 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_circular_chart/flutter_circular_chart.dart'; import 'package:flutter_circular_chart_two/flutter_circular_chart.dart';
import 'dart:math' as Math; import 'dart:math' as Math;
import 'color_palette.dart'; import 'color_palette.dart';
void main() { void main() {
runApp(new MaterialApp( runApp(MaterialApp(
home: new RandomizedRadialChartExample(), home: RandomizedRadialChartExample(),
)); ));
} }
class RandomizedRadialChartExample extends StatefulWidget { class RandomizedRadialChartExample extends StatefulWidget {
@override @override
_RandomizedRadialChartExampleState createState() => _RandomizedRadialChartExampleState createState() => _RandomizedRadialChartExampleState();
new _RandomizedRadialChartExampleState();
} }
class _RandomizedRadialChartExampleState class _RandomizedRadialChartExampleState extends State<RandomizedRadialChartExample> {
extends State<RandomizedRadialChartExample> { final GlobalKey<AnimatedCircularChartState> _chartKey = GlobalKey<AnimatedCircularChartState>();
final GlobalKey<AnimatedCircularChartState> _chartKey =
new GlobalKey<AnimatedCircularChartState>();
final _chartSize = const Size(300.0, 300.0); final _chartSize = const Size(300.0, 300.0);
final Math.Random random = new Math.Random(); final Math.Random random = Math.Random();
List<CircularStackEntry> data; List<CircularStackEntry> data;
@override @override
@ -41,13 +38,13 @@ class _RandomizedRadialChartExampleState
List<CircularStackEntry> _generateRandomData() { List<CircularStackEntry> _generateRandomData() {
int stackCount = random.nextInt(10); int stackCount = random.nextInt(10);
List<CircularStackEntry> data = new List.generate(stackCount, (i) { List<CircularStackEntry> data = List.generate(stackCount, (i) {
int segCount = random.nextInt(10); int segCount = random.nextInt(10);
List<CircularSegmentEntry> segments = new List.generate(segCount, (j) { List<CircularSegmentEntry> segments = List.generate(segCount, (j) {
Color randomColor = ColorPalette.primary.random(random); Color randomColor = ColorPalette.primary.random(random);
return new CircularSegmentEntry(random.nextDouble(), randomColor); return CircularSegmentEntry(random.nextDouble(), randomColor);
}); });
return new CircularStackEntry(segments); return CircularStackEntry(segments);
}); });
return data; return data;
@ -55,19 +52,19 @@ class _RandomizedRadialChartExampleState
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return new Scaffold( return Scaffold(
appBar: new AppBar( appBar: AppBar(
title: const Text('Randomized radial data'), title: const Text('Randomized radial data'),
), ),
body: new Center( body: Center(
child: new AnimatedCircularChart( child: AnimatedCircularChart(
key: _chartKey, key: _chartKey,
size: _chartSize, size: _chartSize,
initialChartData: data, initialChartData: data,
chartType: CircularChartType.Radial, chartType: CircularChartType.Radial,
), ),
), ),
floatingActionButton: new FloatingActionButton( floatingActionButton: FloatingActionButton(
onPressed: _randomize, onPressed: _randomize,
child: const Icon(Icons.refresh), child: const Icon(Icons.refresh),
), ),

2
example/color_palette.dart
View File

@ -3,7 +3,7 @@ import 'dart:math';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
class ColorPalette { class ColorPalette {
static final ColorPalette primary = new ColorPalette(<Color>[ static final ColorPalette primary = ColorPalette(<Color>[
Colors.blue[400], Colors.blue[400],
Colors.blue[200], Colors.blue[200],
Colors.red[400], Colors.red[400],

47
lib/src/animated_circular_chart.dart
View File

@ -1,8 +1,8 @@
import 'package:flutter/foundation.dart'; import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_circular_chart/src/circular_chart.dart'; import 'package:flutter_circular_chart_two/src/circular_chart.dart';
import 'package:flutter_circular_chart/src/entry.dart'; import 'package:flutter_circular_chart_two/src/entry.dart';
import 'package:flutter_circular_chart/src/painter.dart'; import 'package:flutter_circular_chart_two/src/painter.dart';
// The default chart tween animation duration. // The default chart tween animation duration.
const Duration _kDuration = const Duration(milliseconds: 300); const Duration _kDuration = const Duration(milliseconds: 300);
@ -113,17 +113,16 @@ class AnimatedCircularChart extends StatefulWidget {
/// ```dart /// ```dart
/// AnimatedCircularChartState animatedCircularChart = AnimatedCircularChart.of(context); /// AnimatedCircularChartState animatedCircularChart = AnimatedCircularChart.of(context);
/// ``` /// ```
static AnimatedCircularChartState of(BuildContext context, static AnimatedCircularChartState of(BuildContext context, {bool nullOk: false}) {
{bool nullOk: false}) {
assert(context != null); assert(context != null);
assert(nullOk != null); assert(nullOk != null);
final AnimatedCircularChartState result = context final AnimatedCircularChartState result =
.ancestorStateOfType(const TypeMatcher<AnimatedCircularChartState>()); context.findAncestorStateOfType<AnimatedCircularChartState>();
if (nullOk || result != null) return result; if (nullOk || result != null) return result;
throw new FlutterError( throw FlutterError(
'AnimatedCircularChart.of() called with a context that does not contain a AnimatedCircularChart.\n' 'AnimatedCircularChart.of() called with a context that does not contain a AnimatedCircularChart.\n'
'No AnimatedCircularChart ancestor could be found starting from the context that was passed to AnimatedCircularChart.of(). ' 'No AnimatedCircularChart ancestor could be found starting from the context that was passed to AnimatedCircularChart.of(). '
'This can happen when the context provided is from the same StatefulWidget that ' 'This can happen when the context provided is from the same StatefulWidget that '
@ -133,7 +132,7 @@ class AnimatedCircularChart extends StatefulWidget {
} }
@override @override
AnimatedCircularChartState createState() => new AnimatedCircularChartState(); AnimatedCircularChartState createState() => AnimatedCircularChartState();
} }
/// The state for a circular chart that animates when its data is updated. /// The state for a circular chart that animates when its data is updated.
@ -144,9 +143,9 @@ class AnimatedCircularChart extends StatefulWidget {
/// can refer to the [AnimatedCircularChart]'s state with a global key: /// can refer to the [AnimatedCircularChart]'s state with a global key:
/// ///
/// ```dart /// ```dart
/// GlobalKey<AnimatedCircularChartState> chartKey = new GlobalKey<AnimatedCircularChartState>(); /// GlobalKey<AnimatedCircularChartState> chartKey = GlobalKey<AnimatedCircularChartState>();
/// ... /// ...
/// new AnimatedCircularChart(key: chartKey, ...); /// AnimatedCircularChart(key: chartKey, ...);
/// ... /// ...
/// chartKey.currentState.updateData(newData); /// chartKey.currentState.updateData(newData);
/// ``` /// ```
@ -156,21 +155,21 @@ class AnimatedCircularChartState extends State<AnimatedCircularChart>
AnimationController _animation; AnimationController _animation;
final Map<String, int> _stackRanks = <String, int>{}; final Map<String, int> _stackRanks = <String, int>{};
final Map<String, int> _entryRanks = <String, int>{}; final Map<String, int> _entryRanks = <String, int>{};
final TextPainter _labelPainter = new TextPainter(); final TextPainter _labelPainter = TextPainter();
@override @override
void initState() { void initState() {
super.initState(); super.initState();
_animation = new AnimationController( _animation = AnimationController(
duration: widget.duration, duration: widget.duration,
vsync: this, vsync: this,
); );
_assignRanks(widget.initialChartData); _assignRanks(widget.initialChartData);
_tween = new CircularChartTween( _tween = CircularChartTween(
new CircularChart.empty(chartType: widget.chartType), CircularChart.empty(chartType: widget.chartType),
new CircularChart.fromData( CircularChart.fromData(
size: widget.size, size: widget.size,
data: widget.initialChartData, data: widget.initialChartData,
chartType: widget.chartType, chartType: widget.chartType,
@ -188,8 +187,7 @@ class AnimatedCircularChartState extends State<AnimatedCircularChart>
@override @override
void didUpdateWidget(AnimatedCircularChart oldWidget) { void didUpdateWidget(AnimatedCircularChart oldWidget) {
super.didUpdateWidget(oldWidget); super.didUpdateWidget(oldWidget);
if (oldWidget.holeLabel != widget.holeLabel || if (oldWidget.holeLabel != widget.holeLabel || oldWidget.labelStyle != widget.labelStyle) {
oldWidget.labelStyle != widget.labelStyle) {
_updateLabelPainter(); _updateLabelPainter();
} }
} }
@ -217,10 +215,9 @@ class AnimatedCircularChartState extends State<AnimatedCircularChart>
void _updateLabelPainter() { void _updateLabelPainter() {
if (widget.holeLabel != null) { if (widget.holeLabel != null) {
TextStyle _labelStyle = TextStyle _labelStyle = widget.labelStyle ?? Theme.of(context).textTheme.bodyText1;
widget.labelStyle ?? Theme.of(context).textTheme.body2;
_labelPainter _labelPainter
..text = new TextSpan(style: _labelStyle, text: widget.holeLabel) ..text = TextSpan(style: _labelStyle, text: widget.holeLabel)
..textDirection = Directionality.of(context) ..textDirection = Directionality.of(context)
..textScaleFactor = MediaQuery.of(context).textScaleFactor ..textScaleFactor = MediaQuery.of(context).textScaleFactor
..layout(); ..layout();
@ -235,9 +232,9 @@ class AnimatedCircularChartState extends State<AnimatedCircularChart>
_assignRanks(data); _assignRanks(data);
setState(() { setState(() {
_tween = new CircularChartTween( _tween = CircularChartTween(
_tween.evaluate(_animation), _tween.evaluate(_animation),
new CircularChart.fromData( CircularChart.fromData(
size: widget.size, size: widget.size,
data: data, data: data,
chartType: widget.chartType, chartType: widget.chartType,
@ -255,9 +252,9 @@ class AnimatedCircularChartState extends State<AnimatedCircularChart>
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return new CustomPaint( return CustomPaint(
size: widget.size, size: widget.size,
painter: new AnimatedCircularChartPainter( painter: AnimatedCircularChartPainter(
_tween.animate(_animation), _tween.animate(_animation),
widget.holeLabel != null ? _labelPainter : null, widget.holeLabel != null ? _labelPainter : null,
), ),

40
lib/src/circular_chart.dart
View File

@ -1,10 +1,10 @@
import 'package:flutter/animation.dart'; import 'package:flutter/animation.dart';
import 'package:flutter/foundation.dart'; import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_circular_chart/src/animated_circular_chart.dart'; import 'package:flutter_circular_chart_two/src/animated_circular_chart.dart';
import 'package:flutter_circular_chart/src/entry.dart'; import 'package:flutter_circular_chart_two/src/entry.dart';
import 'package:flutter_circular_chart/src/stack.dart'; import 'package:flutter_circular_chart_two/src/stack.dart';
import 'package:flutter_circular_chart/src/tween.dart'; import 'package:flutter_circular_chart_two/src/tween.dart';
class CircularChart { class CircularChart {
static const double _kStackWidthFraction = 0.75; static const double _kStackWidthFraction = 0.75;
@ -20,7 +20,7 @@ class CircularChart {
final SegmentEdgeStyle edgeStyle; final SegmentEdgeStyle edgeStyle;
factory CircularChart.empty({@required CircularChartType chartType}) { factory CircularChart.empty({@required CircularChartType chartType}) {
return new CircularChart(<CircularChartStack>[], chartType); return CircularChart(<CircularChartStack>[], chartType);
} }
factory CircularChart.fromData({ factory CircularChart.fromData({
@ -35,38 +35,36 @@ class CircularChart {
SegmentEdgeStyle edgeStyle, SegmentEdgeStyle edgeStyle,
}) { }) {
final double _holeRadius = holeRadius ?? size.width / (2 + data.length); final double _holeRadius = holeRadius ?? size.width / (2 + data.length);
final double stackDistance = final double stackDistance = (size.width / 2 - _holeRadius) / (2 + data.length);
(size.width / 2 - _holeRadius) / (2 + data.length);
final double stackWidth = stackDistance * _kStackWidthFraction; final double stackWidth = stackDistance * _kStackWidthFraction;
final double startRadius = stackDistance + _holeRadius; final double startRadius = stackDistance + _holeRadius;
List<CircularChartStack> stacks = new List<CircularChartStack>.generate( List<CircularChartStack> stacks = List<CircularChartStack>.generate(
data.length, data.length,
(i) => new CircularChartStack.fromData( (i) => CircularChartStack.fromData(
stackRanks[data[i].rankKey] ?? i, stackRanks[data[i].rankKey] ?? i,
data[i].entries, data[i].entries,
entryRanks, entryRanks,
percentageValues, percentageValues,
startRadius + i * stackDistance, startRadius + i * stackDistance,
stackWidth, stackWidth,
startAngle, startAngle,
), ),
); );
return new CircularChart(stacks, chartType, edgeStyle: edgeStyle); return CircularChart(stacks, chartType, edgeStyle: edgeStyle);
} }
} }
class CircularChartTween extends Tween<CircularChart> { class CircularChartTween extends Tween<CircularChart> {
CircularChartTween(CircularChart begin, CircularChart end) CircularChartTween(CircularChart begin, CircularChart end)
: _stacksTween = : _stacksTween = MergeTween<CircularChartStack>(begin.stacks, end.stacks),
new MergeTween<CircularChartStack>(begin.stacks, end.stacks),
super(begin: begin, end: end); super(begin: begin, end: end);
final MergeTween<CircularChartStack> _stacksTween; final MergeTween<CircularChartStack> _stacksTween;
@override @override
CircularChart lerp(double t) => new CircularChart( CircularChart lerp(double t) => CircularChart(
_stacksTween.lerp(t), _stacksTween.lerp(t),
begin.chartType, begin.chartType,
edgeStyle: end.edgeStyle, edgeStyle: end.edgeStyle,

26
lib/src/painter.dart
View File

@ -1,13 +1,12 @@
import 'dart:math' as Math; import 'dart:math' as Math;
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_circular_chart/src/animated_circular_chart.dart'; import 'package:flutter_circular_chart_two/src/animated_circular_chart.dart';
import 'package:flutter_circular_chart/src/circular_chart.dart'; import 'package:flutter_circular_chart_two/src/circular_chart.dart';
import 'package:flutter_circular_chart/src/stack.dart'; import 'package:flutter_circular_chart_two/src/stack.dart';
class AnimatedCircularChartPainter extends CustomPainter { class AnimatedCircularChartPainter extends CustomPainter {
AnimatedCircularChartPainter(this.animation, this.labelPainter) AnimatedCircularChartPainter(this.animation, this.labelPainter) : super(repaint: animation);
: super(repaint: animation);
final Animation<CircularChart> animation; final Animation<CircularChart> animation;
final TextPainter labelPainter; final TextPainter labelPainter;
@ -44,7 +43,7 @@ void _paintLabel(Canvas canvas, Size size, TextPainter labelPainter) {
if (labelPainter != null) { if (labelPainter != null) {
labelPainter.paint( labelPainter.paint(
canvas, canvas,
new Offset( Offset(
size.width / 2 - labelPainter.width / 2, size.width / 2 - labelPainter.width / 2,
size.height / 2 - labelPainter.height / 2, size.height / 2 - labelPainter.height / 2,
), ),
@ -53,13 +52,10 @@ void _paintLabel(Canvas canvas, Size size, TextPainter labelPainter) {
} }
void _paintChart(Canvas canvas, Size size, CircularChart chart) { void _paintChart(Canvas canvas, Size size, CircularChart chart) {
final Paint segmentPaint = new Paint() final Paint segmentPaint = Paint()
..style = chart.chartType == CircularChartType.Radial ..style =
? PaintingStyle.stroke chart.chartType == CircularChartType.Radial ? PaintingStyle.stroke : PaintingStyle.fill
: PaintingStyle.fill ..strokeCap = chart.edgeStyle == SegmentEdgeStyle.round ? StrokeCap.round : StrokeCap.butt;
..strokeCap = chart.edgeStyle == SegmentEdgeStyle.round
? StrokeCap.round
: StrokeCap.butt;
for (final CircularChartStack stack in chart.stacks) { for (final CircularChartStack stack in chart.stacks) {
for (final segment in stack.segments) { for (final segment in stack.segments) {
@ -67,8 +63,8 @@ void _paintChart(Canvas canvas, Size size, CircularChart chart) {
segmentPaint.strokeWidth = stack.width; segmentPaint.strokeWidth = stack.width;
canvas.drawArc( canvas.drawArc(
new Rect.fromCircle( Rect.fromCircle(
center: new Offset(size.width / 2, size.height / 2), center: Offset(size.width / 2, size.height / 2),
radius: stack.radius, radius: stack.radius,
), ),
stack.startAngle * _kRadiansPerDegree, stack.startAngle * _kRadiansPerDegree,

17
lib/src/segment.dart
View File

@ -1,7 +1,7 @@
import 'dart:ui'; import 'dart:ui';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_circular_chart/src/tween.dart'; import 'package:flutter_circular_chart_two/src/tween.dart';
class CircularChartSegment extends MergeTweenable<CircularChartSegment> { class CircularChartSegment extends MergeTweenable<CircularChartSegment> {
CircularChartSegment(this.rank, this.sweepAngle, this.color); CircularChartSegment(this.rank, this.sweepAngle, this.color);
@ -11,20 +11,19 @@ class CircularChartSegment extends MergeTweenable<CircularChartSegment> {
final Color color; final Color color;
@override @override
CircularChartSegment get empty => new CircularChartSegment(rank, 0.0, color); CircularChartSegment get empty => CircularChartSegment(rank, 0.0, color);
@override @override
bool operator <(CircularChartSegment other) => rank < other.rank; bool operator <(CircularChartSegment other) => rank < other.rank;
@override @override
Tween<CircularChartSegment> tweenTo(CircularChartSegment other) => Tween<CircularChartSegment> tweenTo(CircularChartSegment other) =>
new CircularChartSegmentTween(this, other); CircularChartSegmentTween(this, other);
static CircularChartSegment lerp( static CircularChartSegment lerp(CircularChartSegment begin, CircularChartSegment end, double t) {
CircularChartSegment begin, CircularChartSegment end, double t) {
assert(begin.rank == end.rank); assert(begin.rank == end.rank);
return new CircularChartSegment( return CircularChartSegment(
begin.rank, begin.rank,
lerpDouble(begin.sweepAngle, end.sweepAngle, t), lerpDouble(begin.sweepAngle, end.sweepAngle, t),
Color.lerp(begin.color, end.color, t), Color.lerp(begin.color, end.color, t),
@ -33,13 +32,11 @@ class CircularChartSegment extends MergeTweenable<CircularChartSegment> {
} }
class CircularChartSegmentTween extends Tween<CircularChartSegment> { class CircularChartSegmentTween extends Tween<CircularChartSegment> {
CircularChartSegmentTween( CircularChartSegmentTween(CircularChartSegment begin, CircularChartSegment end)
CircularChartSegment begin, CircularChartSegment end)
: super(begin: begin, end: end) { : super(begin: begin, end: end) {
assert(begin.rank == end.rank); assert(begin.rank == end.rank);
} }
@override @override
CircularChartSegment lerp(double t) => CircularChartSegment lerp(double t) => CircularChartSegment.lerp(begin, end, t);
CircularChartSegment.lerp(begin, end, t);
} }

27
lib/src/stack.dart
View File

@ -1,9 +1,9 @@
import 'dart:ui' show lerpDouble; import 'dart:ui' show lerpDouble;
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_circular_chart/src/entry.dart'; import 'package:flutter_circular_chart_two/src/entry.dart';
import 'package:flutter_circular_chart/src/segment.dart'; import 'package:flutter_circular_chart_two/src/segment.dart';
import 'package:flutter_circular_chart/src/tween.dart'; import 'package:flutter_circular_chart_two/src/tween.dart';
const double _kMaxAngle = 360.0; const double _kMaxAngle = 360.0;
@ -39,16 +39,14 @@ class CircularChartStack implements MergeTweenable<CircularChartStack> {
); );
double previousSweepAngle = 0.0; double previousSweepAngle = 0.0;
List<CircularChartSegment> segments = List<CircularChartSegment> segments = List<CircularChartSegment>.generate(entries.length, (i) {
new List<CircularChartSegment>.generate(entries.length, (i) { double sweepAngle = (entries[i].value / valueSum * _kMaxAngle) + previousSweepAngle;
double sweepAngle =
(entries[i].value / valueSum * _kMaxAngle) + previousSweepAngle;
previousSweepAngle = sweepAngle; previousSweepAngle = sweepAngle;
int rank = entryRanks[entries[i].rankKey] ?? i; int rank = entryRanks[entries[i].rankKey] ?? i;
return new CircularChartSegment(rank, sweepAngle, entries[i].color); return CircularChartSegment(rank, sweepAngle, entries[i].color);
}); });
return new CircularChartStack( return CircularChartStack(
stackRank, stackRank,
startRadius, startRadius,
stackWidth, stackWidth,
@ -58,21 +56,20 @@ class CircularChartStack implements MergeTweenable<CircularChartStack> {
} }
@override @override
CircularChartStack get empty => new CircularChartStack( CircularChartStack get empty =>
rank, radius, 0.0, startAngle, <CircularChartSegment>[]); CircularChartStack(rank, radius, 0.0, startAngle, <CircularChartSegment>[]);
@override @override
bool operator <(CircularChartStack other) => rank < other.rank; bool operator <(CircularChartStack other) => rank < other.rank;
@override @override
Tween<CircularChartStack> tweenTo(CircularChartStack other) => Tween<CircularChartStack> tweenTo(CircularChartStack other) =>
new CircularChartStackTween(this, other); CircularChartStackTween(this, other);
} }
class CircularChartStackTween extends Tween<CircularChartStack> { class CircularChartStackTween extends Tween<CircularChartStack> {
CircularChartStackTween(CircularChartStack begin, CircularChartStack end) CircularChartStackTween(CircularChartStack begin, CircularChartStack end)
: _circularSegmentsTween = : _circularSegmentsTween = MergeTween<CircularChartSegment>(begin.segments, end.segments),
new MergeTween<CircularChartSegment>(begin.segments, end.segments),
super(begin: begin, end: end) { super(begin: begin, end: end) {
assert(begin.rank == end.rank); assert(begin.rank == end.rank);
} }
@ -80,7 +77,7 @@ class CircularChartStackTween extends Tween<CircularChartStack> {
final MergeTween<CircularChartSegment> _circularSegmentsTween; final MergeTween<CircularChartSegment> _circularSegmentsTween;
@override @override
CircularChartStack lerp(double t) => new CircularChartStack( CircularChartStack lerp(double t) => CircularChartStack(
begin.rank, begin.rank,
lerpDouble(begin.radius, end.radius, t), lerpDouble(begin.radius, end.radius, t),
lerpDouble(begin.width, end.width, t), lerpDouble(begin.width, end.width, t),

2
lib/src/tween.dart
View File

@ -32,7 +32,7 @@ class MergeTween<T extends MergeTweenable<T>> extends Tween<List<T>> {
final _tweens = <Tween<T>>[]; final _tweens = <Tween<T>>[];
@override @override
List<T> lerp(double t) => new List.generate( List<T> lerp(double t) => List.generate(
_tweens.length, _tweens.length,
(i) => _tweens[i].lerp(t), (i) => _tweens[i].lerp(t),
); );

2
pubspec.yaml
View File

@ -1,4 +1,4 @@
name: circular_chart name: flutter_circular_chart_two
description: Animated radial and pie charts for Flutter. Forked from https://github.com/xqwzts/flutter_circular_chart description: Animated radial and pie charts for Flutter. Forked from https://github.com/xqwzts/flutter_circular_chart
version: 0.1.0 version: 0.1.0
author: Gustavo Bonifacio Rodrigues <omykronbr@gmail.com> author: Gustavo Bonifacio Rodrigues <omykronbr@gmail.com>

7
test/flutter_circular_chart_test.dart
View File

@ -1,7 +0,0 @@
import 'package:test/test.dart';
import 'package:flutter_circular_chart/flutter_circular_chart.dart';
void main() {
}