How to Create Animated Pie Chart in Flutter

Hello Folks, In this tutorial we are going to impliment an Animated Pie Chart or Donut Chart on our Flutter Project. To do this, create a new project or start from our pie chart project. You can show data from API as well as local. So let's start,

Add Dependency

After creating your project simply add this package by applying the command below.

flutter pub add pie_chart

It will add Pie Chart to your project. Now let's Implimnet it into our Project.

Import Pie Chart 

Create a dart file with statefull widget. For example purpose, we are creating pie.dart with statefull widget named MyChart. Now import this line.

import 'package:pie_chart/pie_chart.dart';

Creating Pie Chart 

Pie Chart supports double value for its items in data map. Here is the example of our Simple Pie Chart.

There are other option we will teach you soon. It is the basic. Now lets set colors for our Pie Chart.

Before widget build , declear a color list. Here we are using our custom color list.

  final pieColor = <Color>[
      Color(0XFFde5246),
      Color(0XFF4285F4),
      Color(0XFF1aa260),
  ];

Now we are chaging pie chart Color.

Change Pie Chart Colors

Now declear our color list name into our Pie Chart. Here we decleard our Pie chart color list. Color list items must be same as our data Map items.

Parse Double Value into Pie Chart

Hence Pie chart only support Double value for it's dataMap so that sometimes we have to parse data from api that is in String Value. So how to parse String Number into Double on Pie chart.For this , We are hoping you read our tutorial of how to get data from API on Flutter and How to Use Future Builder. 

Suppose we have a data from future builder snapshot. And we want show it on "Died" data map. To do it , you have to parse like this.

"Died": double.parse(snapshot.data!.deaths.toString()),

Hope you understand this concept. Let's Animate Our Pie Chart 

Animate Pie Chart

If you want to deep drive into Animation Controlling then you can read our Animtion Builder tutorial here. To animate Pie chart you dont need to know the Animation Builder or controler, Simply add this line after colorList into Pie chart.

animationDuration: Duration(seconds: 1),

 Discover More on Pie Chart

Show data in percent.

chartValuesOptions: const ChartValuesOptions(showChartValuesInPercentage: true),

Show titles left side of Pie Charts

 legendOptions: const LegendOptions(legendPosition: LegendPosition.left),

Convert Pie Chart into Ring/Donut Chart 

chartType: ChartType.ring,

Full Code 

We always provide source code to explore more. Copy Full Code from Here

  import 'package:flutter/material.dart';
import 'package:pie_chart/pie_chart.dart';

class MyChart extends StatefulWidget {
  const MyChart({super.key});

  @override
  State<MyChart> createState() => _MyChartState();
}

final pieColor = <Color>[
  const Color(0XFFde5246),
  const Color(0XFF4285F4),
  const Color(0XFF1aa260),
];

class _MyChartState extends State<MyChart> {
  @override
  Widget build(BuildContext context) {
    return PieChart(
      colorList: pieColor,
      chartType: ChartType.ring,
      animationDuration: Duration(seconds: 1),
      chartValuesOptions: const ChartValuesOptions(showChartValuesInPercentage: true),
      legendOptions: const LegendOptions(legendPosition: LegendPosition.left),
      dataMap: const {
        "Died": 30,
        "Affected": 45,
        "Secure": 25,
      },
    );
  }
}

  

Result

Here is the sample what we codded above. Hope it's helps you to learn about Flutter Pie Chart.

Conclusion:

In this tutorial , we learn about Pie Chart building on Flutter. What next you want to learn ? Let me know on comment section. Thank You.