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.