diff --git a/README.md b/README.md index 834e536..7d09496 100644 --- a/README.md +++ b/README.md @@ -1,9 +1,76 @@ -# flutter_circular_chart +# Flutter Circular Chart -Animated radial and pie charts for Flutter +A library for creating animated circular chart widgets with Flutter, inspired by [Zero to One with Flutter](https://medium.com/dartlang/zero-to-one-with-flutter-43b13fd7b354). + + +## Installation + +__Note:__ This is a WIP early implementation, use at your own risk. You can install it by including this git repository in your package dependencies: + +``` + dependencies: + flutter_circular_chart: + git: + url: git://github.com/xqwzts/flutter_circular_chart.git +``` ## Getting Started -For help getting started with Flutter, view our online [documentation](http://flutter.io/). +Import the package: + +``` +import 'package:flutter_circular_chart/flutter_circular_chart.dart'; +``` + +Create chart data entry objects: + +``` +List data = [ + new CircularStackEntry( + [ + new CircularSegmentEntry(500.0, Colors.red[200], rankKey: 'Q1'), + new CircularSegmentEntry(1000.0, Colors.green[200], rankKey: 'Q2'), + new CircularSegmentEntry(2000.0, Colors.blue[200], rankKey: 'Q3'), + new CircularSegmentEntry(1000.0, Colors.yellow[200], rankKey: 'Q4'), + ], + rankKey: 'Quarterly Profits', + ), +]; +``` + +Create an `AnimatedCircularChart`: + +``` +@override +Widget build(BuildContext context) { + return new AnimatedCircularChart( + key: _chartKey, + size: const Size(300, 300), + initialChartData: data, + chartType: CircularChartType.Pie, + ); +} +``` + +Call `updateData` to animate the chart: + +``` +void _cycleSamples() { + List nextData = [ + new CircularStackEntry( + [ + new CircularSegmentEntry(1500.0, Colors.red[200], rankKey: 'Q1'), + new CircularSegmentEntry(750.0, Colors.green[200], rankKey: 'Q2'), + new CircularSegmentEntry(2000.0, Colors.blue[200], rankKey: 'Q3'), + new CircularSegmentEntry(1000.0, Colors.yellow[200], rankKey: 'Q4'), + ], + rankKey: 'Quarterly Profits', + ), + ]; + setState(() { + _chartKey.currentState.updateData(nextData); + }); +} +``` + -For help on editing package code, view the [documentation](https://flutter.io/developing-packages/).