flutter_circular_chart 0.0.2

  • README.md
  • Installing
  • Versions
  • 83

Flutter Circular Chart

A library for creating animated circular chart widgets with Flutter, inspired by Zero to One with Flutter.


Create easily animated pie charts and radial charts by providing them with data objects they can plot into charts and animate between.

animated pie chart animated radial chart animated_random_radial_chart

Check the examples folder for the source code for the above screenshots.



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:

          url: git://github.com/xqwzts/flutter_circular_chart.git

Getting Started

Import the package:

import 'package:flutter_circular_chart/flutter_circular_chart.dart';

Create a GlobalKey to be able to access the chart and update its data:

final GlobalKey<AnimatedCircularChartState> _chartKey = new GlobalKey<AnimatedCircularChartState>();

Create chart data entry objects:

List<CircularStackEntry> data = <CircularStackEntry>[
  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, passing it the _chartKey and initial data:

Widget build(BuildContext context) {
  return new AnimatedCircularChart(
    key: _chartKey,
    size: const Size(300.0, 300.0),
    initialChartData: data,
    chartType: CircularChartType.Pie,

Call updateData to animate the chart:

void _cycleSamples() {
  List<CircularStackEntry> nextData = <CircularStackEntry>[
    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(() {


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 CircularStackEntrys will display them as concentric circles.

Each CircularStackEntry is composed of multiple CircularSegmentEntrys 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.

[0.0.2] - 2018-03-21

  • Added holeLabel and labelStyle properties used to draw a label in the center of the radial chart.

[0.0.1] - 2017-11-03

  • Animated pie and radial charts.

1. Depend on it

Add this to your package's pubspec.yaml file:

  flutter_circular_chart: "^0.0.2"

2. Install it

You can install packages from the command line:

with Flutter:

$ flutter packages get

Alternatively, your editor might support packages get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:

import 'package:flutter_circular_chart/flutter_circular_chart.dart';
Version Uploaded Documentation Archive
0.0.2 Mar 21, 2018 Go to the documentation of flutter_circular_chart 0.0.2 Download flutter_circular_chart 0.0.2 archive


We analyzed this package on Apr 23, 2018, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.0.0-dev.49.0
  • pana: 0.10.6
  • Flutter: 0.3.2


Describes how popular the package is relative to other packages. [more]
67 / 100
Code health derived from static analysis. [more]
100 / 100
Reflects how tidy and up-to-date the package is. [more]
100 / 100
Overall score:
Weighted score of the above. [more]
Learn more about scoring.


Detected platforms: Flutter

References Flutter, and has no conflicting libraries.


  • The description is too short.

    Add more detail about the package, what it does and what is its target use case. Try to write at least 60 characters.

  • Package is pre-v1 release.

    While there is nothing inherently wrong with versions of 0.*.*, it usually means that the author is still experimenting with the general direction API.

  • Maintain an example.

    None of the files in your example/ directory matches a known example patterns. Common file name patterns include: main.dart, example.dart or you could also use flutter_circular_chart.dart.

  • Fix analysis and formatting issues.

    Analysis or formatting checks reported 1 hint.

    Run flutter format to format lib/src/animated_circular_chart.dart.


Package Constraint Resolved Available
Direct dependencies
Dart SDK >=1.19.0 <2.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.6 1.14.9
meta 1.1.2
sky_engine 0.0.99
typed_data 1.1.5
vector_math 2.0.6
Dev dependencies
test ^0.12.0