flutter_radar_chart 0.1.2

  • Readme
  • Changelog
  • Example
  • Installing
  • 81

flutter_radar_chart #

Animated radar chart for Flutter inspired by The Python Graph Gallery (https://python-graph-gallery.com/radar-chart/).

Follow the instructions on pub to install this package.

Example #


Usage #

Basic usage of radar chart requires three pieces of data:

  • ticks - Defines the numerical axis for the chart. Each tick generates an outline. Currently, each feature is plotted using the numerical range define by the ticks.
  • features - Defines the numerical variables for each individual in the chart. There is no limit to the number of features.
  • data - List of data points used to construct each individual in the chart. The number of data points must match the number of features. There is no limit to the number of individuals in the chart; however, multiple entities might cause the graph to become unreadable.
    ticks: ticks,
    features: features,
    data: data,

A full example (as seen in the screenshots) can be found in example/lib/main.dart

Customizability #

Most of the customizability of the graph is a work in progress, but here's some of the features of the chart:

  • Animations! Trying to add some life to the chart. Animation is currently triggered whenever the widget is updated (didUpdateWidget). Animations are currently enabled by default.
  • Number of features: As shown in the example, the radar chart will adjust to the number of given variables. More work is needed to ensure the chart doesn't explode when given invalid data.
  • Reverse axis: Reverses the axis range so that the min value starts at the graph outline.
  • Dark mode: Simple factory that showcases the color customizability of the chart.


Future Work Ideas #

There's a few more areas of work that I'd love to get around to building. I will eventually move these items over to issues for better tracking.

  • [ ] Option for round corners
  • [x] Animations on render
  • [ ] Integration testing
  • [ ] Responsive design
  • [ ] Legends

Acknowledgements #

[0.1.2] - 2019-08-25

  • The position of feature labels are now properly adjust based on the number of characters.

[0.1.1] - 2019-08-10

  • Updating the example to showcase the flexibility of the chart.

[0.1.0] - 2019-08-10

  • Adding basic animation on widget update.

[0.0.2] - 2019-08-10

  • Adding the information needed for publishing the package.

[0.0.1] - 2019-08-08

  • Providing the basic functionality of a radar chart.


Example of flutter_radar_chart #


Use this package as a library

1. Depend on it

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

  flutter_radar_chart: ^0.1.2

2. Install it

You can install packages from the command line:

with Flutter:

$ flutter pub get

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

3. Import it

Now in your Dart code, you can use:

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

We analyzed this package on Oct 11, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.5.1
  • pana: 0.12.21
  • Flutter: 1.9.1+hotfix.4


Detected platforms: Flutter

References Flutter, and has no conflicting libraries.


Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.7
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies