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

fixes

Browse Source
This commit is contained in:
Gustavo Rodrigues 2021-03-08 12:54:34 -05:00
parent 3193dc0c22
commit 6362138705
6 changed files with 11 additions and 196 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

196
README.md
View File

@ -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<AnimatedCircularChartState> _chartKey = GlobalKey<AnimatedCircularChartState>();
```
Create chart data entry objects:
```dart
List<CircularStackEntry> data = <CircularStackEntry>[
CircularStackEntry(
<CircularSegmentEntry>[
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<CircularStackEntry> nextData = <CircularStackEntry>[
CircularStackEntry(
<CircularSegmentEntry>[
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>[
CircularStackEntry(
<CircularSegmentEntry>[
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>[
CircularStackEntry(
<CircularSegmentEntry>[
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)

2
example/animated_pie_chart_example.dart
View File

@ -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(

2
example/animated_radial_chart_example.dart
View File

@ -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(

2
example/animated_random_radial_chart_example.dart
View File

@ -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';

2
lib/flutter_circular_chart.dart → lib/flutter_circular_chart_two.dart
View File

@ -1,4 +1,4 @@
library flutter_circular_chart;
library flutter_circular_chart_two;
export 'src/circular_chart.dart';
export 'src/animated_circular_chart.dart';

3
pubspec.yaml
View File

@ -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 <omykronbr@gmail.com>
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"