Morioh
Login
Flutter Developer

Flutter Developer

3 years ago

Flutter Pie chart with animation

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

Demo

piechart

💻 Installation

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

Version

dependencies:
  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.

PieChart

Map<String, double> dataMap = {
    "Flutter": 5,
    "React": 3,
    "Xamarin": 2,
    "Ionic": 2,
  };

Simple Implementation

PieChart(dataMap: dataMap)

Full Implementation

PieChart(
      dataMap: dataMap,
      animationDuration: Duration(milliseconds: 800),
      chartLegendSpacing: 32,
      chartRadius: MediaQuery.of(context).size.width / 3.2,
      colorList: colorList,
      initialAngle: 0,
      chartType: ChartType.ring,
      ringStrokeWidth: 32,
      centerText: "HYBRID",
      legendOptions: LegendOptions(
        showLegendsInRow: false,
        legendPosition: LegendPosition.right,
        showLegends: true,
        legendShape: _BoxShape.circle,
        legendTextStyle: TextStyle(
          fontWeight: FontWeight.bold,
        ),
      ),
      chartValuesOptions: ChartValuesOptions(
        showChartValueBackground: true,
        showChartValues: true,
        showChartValuesInPercentage: false,
        showChartValuesOutside: false,
      ),
    )

Change legend position with ‘legendPosition’

PieChart PieChart PieChart PieChart

Change Chart shape to ring

chartType: ChartType.ring,

PieChart

chartType: ChartType.ring,
showChartValuesOutside: true,

PieChart

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

Download Details:

Author: apgapg

Demo: https://apgapg.github.io/pie_chart/#/

Source Code: https://github.com/apgapg/pie_chart

#flutter #dart #mobile-apps

Flutter Pie chart with animation
10.95 GEEK