Pie Chart

This Flutter package provides a Pie Chart Widget with cool animation.

💻 Installation

In the dependencies: section of your pubspec.yaml, add the following line:


  pie_chart: <latest version>

❔ Usage

Import this class

import 'package:pie_chart/pie_chart.dart';

Usage is simple. Pie Chart is a widget and it just need a Map<String,double> as its data input.

Map<String, double> dataMap = new Map();
dataMap.putIfAbsent("Flutter", () => 5);
dataMap.putIfAbsent("React", () => 3);
dataMap.putIfAbsent("Xamarin", () => 2);
dataMap.putIfAbsent("Ionic", () => 2);

- Simple Implementation

PieChart(dataMap: dataMap) 

- Full Implementation

        dataMap: dataMap,
        animationDuration: Duration(milliseconds: 800),
        chartLegendSpacing: 32.0,
        chartRadius: MediaQuery.of(context).size.width / 2.7,
        showChartValuesInPercentage: true,
        showChartValues: true,
        showChartValuesOutside: false,
        chartValueBackgroundColor: Colors.grey[200],
        colorList: colorList,
        showLegends: true,
        legendPosition: LegendPosition.right,
        decimalPlaces: 1,
        showChartValueLabel: true,
        initialAngle: 0,
        chartValueStyle: defaultChartValueStyle.copyWith(
          color: Colors.blueGrey[900].withOpacity(0.9),
        chartType: ChartType.disc,

Change legend position with 'legendPosition'

PieChart PieChart PieChart PieChart

Change Chart shape to ring

chartType: ChartType.ring,
chartType: ChartType.ring,
showChartValuesOutside: true,

⭐ My Flutter Packages

  • json_table GitHub stars Create Flutter Json Table from json map directly.
  • avatar_glow GitHub stars Flutter Avatar Glow Widget with glowing animation.
  • search_widget GitHub stars Flutter Search Widget for selecting an option from list.
  • animating_location_pin GitHub stars Flutter Animating Location Pin Widget providing Animating Location Pin Widget which can be used while fetching device location.

⭐ My Flutter Apps

👍 Contribution

  1. Fork it
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Commit your changes (git commit -m 'Add some feature')
  4. Push to the branch (git push origin my-new-feature)
  5. Create new Pull Request





Foreign Function Interface for interoperability with the C programming language. [...]


HTML elements and other resources for web-based applications that need to interact with the browser and the DOM (Document Object Model). [...]
Low-level support for interoperating with JavaScript. [...]
Utility methods to efficiently manipulate typed JSInterop objects in cases where the name to call is not known at runtime. You should only use these methods when the same effect cannot be achieved with @JS annotations. These methods would be extension methods on JSObject if Dart supported extension methods.