diff --git a/README.md b/README.md index 4cf3df8..1331a6c 100644 --- a/README.md +++ b/README.md @@ -1,196 +1,12 @@ -[![pub package](https://img.shields.io/pub/v/flutter_circular_chart.svg)](https://pub.dartlang.org/packages/flutter_circular_chart) +[![pub package](https://img.shields.io/pub/v/flutter_circular_chart_two.svg)](https://pub.dartlang.org/packages/flutter_circular_chart_two) # Flutter Circular Chart +This library is a fork of the original [flutter_circular_chart](https://pub.dartlang.org/packages/flutter_circular_chart) +This provides fix and will keep updating based on user PR + 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). ## Overview - -Create easily animated pie charts and radial charts by providing them with data objects they can plot into charts and animate between. - -![animated_random_radial_chart](screenshots/animated_random_radial_chart_example.gif) - -![animated pie chart](screenshots/animated_pie_chart_example.gif) -![animated radial chart](screenshots/animated_radial_chart_example_label.gif) - -Check the examples folder for the source code for the above screenshots. - -## Contents: -- [Installation](#installation) -- [Getting Started](#getting-started) -- [Customization](#customization) -- [Details](#details) - - [Chart data entries](#chart-data-entries) - -## Installation - -Install the latest version [from pub](https://pub.dartlang.org/packages/flutter_circular_chart#-installing-tab-). - -## Getting Started - -Import the package: - -```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: - -```dart -final GlobalKey _chartKey = GlobalKey(); -``` - -Create chart data entry objects: - -```dart -List data = [ - CircularStackEntry( - [ - CircularSegmentEntry(500.0, Colors.red[200], rankKey: 'Q1'), - CircularSegmentEntry(1000.0, Colors.green[200], rankKey: 'Q2'), - CircularSegmentEntry(2000.0, Colors.blue[200], rankKey: 'Q3'), - CircularSegmentEntry(1000.0, Colors.yellow[200], rankKey: 'Q4'), - ], - rankKey: 'Quarterly Profits', - ), -]; -``` - -Create an `AnimatedCircularChart`, passing it the `_chartKey` and initial `data`: - -```dart -@override -Widget build(BuildContext context) { - return AnimatedCircularChart( - key: _chartKey, - size: const Size(300.0, 300.0), - initialChartData: data, - chartType: CircularChartType.Pie, - ); -} -``` - -Call `updateData` to animate the chart: - -```dart -void _cycleSamples() { - List nextData = [ - CircularStackEntry( - [ - CircularSegmentEntry(1500.0, Colors.red[200], rankKey: 'Q1'), - CircularSegmentEntry(750.0, Colors.green[200], rankKey: 'Q2'), - CircularSegmentEntry(2000.0, Colors.blue[200], rankKey: 'Q3'), - CircularSegmentEntry(1000.0, Colors.yellow[200], rankKey: 'Q4'), - ], - rankKey: 'Quarterly Profits', - ), - ]; - setState(() { - _chartKey.currentState.updateData(nextData); - }); -} -``` - -## Customization - -### Hole Label: - -| Property | Default | -|------------|:---------------------------------:| -| holeLabel | null | -| labelStyle | Theme.of(context).textTheme.body2 | - -Example: - -```dart -AnimatedCircularChart( - key: _chartKey, - size: _chartSize, - initialChartData: [ - CircularStackEntry( - [ - CircularSegmentEntry( - 33.33, - Colors.blue[400], - rankKey: 'completed', - ), - CircularSegmentEntry( - 66.67, - Colors.blueGrey[600], - rankKey: 'remaining', - ), - ], - rankKey: 'progress', - ), - ], - chartType: CircularChartType.Radial, - percentageValues: true, - holeLabel: '1/3', - labelStyle: TextStyle( - color: Colors.blueGrey[600], - fontWeight: FontWeight.bold, - fontSize: 24.0, - ), -) -``` - -![hole label example screenshot](screenshots/hole_label_example.png) - ---- - -### Segment Edge Style: - -| Property | Default | -|------------|:---------------------:| -| edgeStyle | SegmentEdgeStyle.flat | - -| SegmentEdgeStyle | Description | -|:----------------:|--------------------------------------------| -| flat (default) | Segments begin and end with a flat edge. | -| round | Segments begin and end with a semi-circle. | - -Example: - -```dart -AnimatedCircularChart( - key: _chartKey, - size: _chartSize, - initialChartData: [ - CircularStackEntry( - [ - CircularSegmentEntry( - 33.33, - Colors.blue[400], - rankKey: 'completed', - ), - CircularSegmentEntry( - 66.67, - Colors.blueGrey[600], - rankKey: 'remaining', - ), - ], - rankKey: 'progress', - ), - ], - chartType: CircularChartType.Radial, - edgeStyle: SegmentEdgeStyle.round, - percentageValues: true, -) -``` - -![round segment edge example screenshot](screenshots/segment_edge_round_example.png) - -## Details - -### Chart data entries: - -Charts expect a list of `CircularStackEntry` objects containing the data they need to be drawn. - -Each `CircularStackEntry` corresponds to a complete circle in the chart. For radial charts that is one of the rings, for pie charts it is the whole pie. - -Radial charts with multiple `CircularStackEntry`s will display them as concentric circles. - -Each `CircularStackEntry` is composed of multiple `CircularSegmentEntry`s containing the value of a data point. In radial charts a segment corresponds to an arc segment of the current ring, for pie charts it is an individual slice. - - - +The original package provides the context +[flutter_circular_chart](https://pub.dartlang.org/packages/flutter_circular_chart) diff --git a/example/animated_pie_chart_example.dart b/example/animated_pie_chart_example.dart index a780596..00e50cc 100644 --- a/example/animated_pie_chart_example.dart +++ b/example/animated_pie_chart_example.dart @@ -1,5 +1,5 @@ import 'package:flutter/material.dart'; -import 'package:flutter_circular_chart_two/flutter_circular_chart.dart'; +import 'package:flutter_circular_chart_two/flutter_circular_chart_two.dart'; void main() { runApp(MaterialApp( diff --git a/example/animated_radial_chart_example.dart b/example/animated_radial_chart_example.dart index 495e4d7..19876f4 100644 --- a/example/animated_radial_chart_example.dart +++ b/example/animated_radial_chart_example.dart @@ -1,5 +1,5 @@ import 'package:flutter/material.dart'; -import 'package:flutter_circular_chart_two/flutter_circular_chart.dart'; +import 'package:flutter_circular_chart_two/flutter_circular_chart_two.dart'; void main() { runApp(MaterialApp( diff --git a/example/animated_random_radial_chart_example.dart b/example/animated_random_radial_chart_example.dart index eecb2a4..ce97cc6 100644 --- a/example/animated_random_radial_chart_example.dart +++ b/example/animated_random_radial_chart_example.dart @@ -1,5 +1,5 @@ import 'package:flutter/material.dart'; -import 'package:flutter_circular_chart_two/flutter_circular_chart.dart'; +import 'package:flutter_circular_chart_two/flutter_circular_chart_two.dart'; import 'dart:math' as Math; import 'color_palette.dart'; diff --git a/lib/flutter_circular_chart.dart b/lib/flutter_circular_chart_two.dart similarity index 74% rename from lib/flutter_circular_chart.dart rename to lib/flutter_circular_chart_two.dart index 676c208..abc0542 100644 --- a/lib/flutter_circular_chart.dart +++ b/lib/flutter_circular_chart_two.dart @@ -1,4 +1,4 @@ -library flutter_circular_chart; +library flutter_circular_chart_two; export 'src/circular_chart.dart'; export 'src/animated_circular_chart.dart'; diff --git a/pubspec.yaml b/pubspec.yaml index 16143e3..02257ab 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -1,7 +1,6 @@ name: flutter_circular_chart_two description: Animated radial and pie charts for Flutter. Forked from https://github.com/xqwzts/flutter_circular_chart version: 0.1.1 -author: Gustavo Bonifacio Rodrigues homepage: https://github.com/GusRodrigues86/circular_charts dependencies: @@ -13,4 +12,4 @@ dev_dependencies: sdk: flutter environment: - sdk: ">=2.0.0-dev.68.0 <3.0.0" + sdk: ">=2.0.0 <3.0.0"