flutter_circular_chart 0.0.3

  • README.md
  • CHANGELOG.md
  • Installing
  • Versions
  • 47

pub package

Flutter Circular Chart

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

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

animated pie chart animated radial chart

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

Contents:

Installation

Install the latest version from pub.

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(
    <CircularSegmentEntry>[
      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:

@override
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(
      <CircularSegmentEntry>[
        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);
  });
}

Customization

Hole Label:

PropertyDefault
holeLabelnull
labelStyleTheme.of(context).textTheme.body2

Example:

new AnimatedCircularChart(
  key: _chartKey,
  size: _chartSize,
  initialChartData: <CircularStackEntry>[
    new CircularStackEntry(
      <CircularSegmentEntry>[
        new CircularSegmentEntry(
          33.33,
          Colors.blue[400],
          rankKey: 'completed',
        ),
        new CircularSegmentEntry(
          66.67,
          Colors.blueGrey[600],
          rankKey: 'remaining',
        ),
      ],
      rankKey: 'progress',
    ),
  ],
  chartType: CircularChartType.Radial,
  percentageValues: true,
  holeLabel: '1/3',
  labelStyle: new TextStyle(
    color: Colors.blueGrey[600],
    fontWeight: FontWeight.bold,
    fontSize: 24.0,
  ),
)

hole label example screenshot


Segment Edge Style:

PropertyDefault
edgeStyleSegmentEdgeStyle.flat
SegmentEdgeStyleDescription
flat (default)Segments begin and end with a flat edge.
roundSegments begin and end with a semi-circle.

Example:

new AnimatedCircularChart(
  key: _chartKey,
  size: _chartSize,
  initialChartData: <CircularStackEntry>[
    new CircularStackEntry(
      <CircularSegmentEntry>[
        new CircularSegmentEntry(
          33.33,
          Colors.blue[400],
          rankKey: 'completed',
        ),
        new CircularSegmentEntry(
          66.67,
          Colors.blueGrey[600],
          rankKey: 'remaining',
        ),
      ],
      rankKey: 'progress',
    ),
  ],
  chartType: CircularChartType.Radial,
  edgeStyle: SegmentEdgeStyle.round,
  percentageValues: true,
)

round segment edge example screenshot

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 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.3] - 2018-05-09

  • Added edgeStyle property and SegmentEdgeStyle enum used to determine the strokeCap drawn for a chart's segments.

[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.

Use this package as a library

1. Depend on it

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


dependencies:
  flutter_circular_chart: ^0.0.3

2. Install it

You can install packages from the command line:

with pub:


$ pub get

with Flutter:


$ flutter packages get

Alternatively, your editor might support pub get or flutter 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.3 May 9, 2018 Go to the documentation of flutter_circular_chart 0.0.3 Download flutter_circular_chart 0.0.3 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
Popularity:
Describes how popular the package is relative to other packages. [more]
93
Health:
Code health derived from static analysis. [more]
0
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
0
Overall:
Weighted score of the above. [more]
47
Learn more about scoring.

The package version is not analyzed, because it does not support Dart 2. Until this is resolved, the package will receive a health and maintenance score of 0.

Issues and suggestions

Support Dart 2 in pubspec.yaml.

The SDK constraint in pubspec.yaml doesn't allow the Dart 2.0.0 release. For information about upgrading it to be Dart 2 compatible, please see https://www.dartlang.org/dart-2#migration.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=1.19.0 <2.0.0