Pie charts are an effective way to represent data in a visually appealing and easily understandable format. In Flutter, creating a pie chart is relatively easy with the help of a few external packages. In this article, we will explore how to create a pie chart in Flutter and how to animate it.
Use cases
Following are some of the use cases of a pie chart in a mobile application-
- Sales and Revenue: Pie charts can be used to show the sales and revenue distribution of a company. The size of each slice represents the proportion of revenue generated by a particular product or service.
- Expense Tracker: Pie charts can be used to show the breakdown of expenses in a budget or expense tracker app. Each slice represents the proportion of the budget spent on a particular category, such as rent, groceries, or entertainment.
- User Demographics: Pie charts can be used to show the distribution of users by age, gender, or other demographic factors. Each slice represents the proportion of users in a particular category.
- Survey Results: Pie charts can be used to show the results of a survey or poll. Each slice represents the percentage of respondents who selected a particular answer option.
- Task Management: Pie charts can be used to show the progress of tasks in a project management app. Each slice represents the percentage of tasks completed or remaining.
Steps Required
- Define the data.
- Create the chart.
- Define the chart data.
- Display the chart.
What we are going to build in this article?
Here is a sample video of what we are going to build in this article-
Note: Make sure to have the latest version of Flutter to avoid any kind of errors.
Step By Step Implementation
Step 1: Create a New Project in Android Studio
To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.
Note:
If you like to create a flutter project using terminal use the below command
$ flutter create flutter_app
replace the ‘ flutter_app ‘ with your project name
Step 2: Add dependency
Add the following dependency in pubspec.yaml file-
pie_chart: ^5.1.0
Step 3: Working with the main.dart file
Use the below code in the main.dart file. Comments are added inside the code to understand the code in more detail.
import 'package:flutter/material.dart' ;
import 'package:pie_chart/pie_chart.dart' ;
void main() {
runApp( const MyApp());
} class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false ,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(),
);
}
} class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
State<MyHomePage> createState() => _MyHomePageState();
} class _MyHomePageState extends State<MyHomePage> {
// Data for the pie chart
Map<String, double > dataMap = {
"Food Items" : 18.47,
"Clothes" : 17.70,
"Technology" : 4.25,
"Cosmetics" : 3.51,
"Other" : 2.83,
};
// Colors for each segment
// of the pie chart
List<Color> colorList = [
const Color(0xffD95AF3),
const Color(0xff3EE094),
const Color(0xff3398F6),
const Color(0xffFA4A42),
const Color(0xffFE9539)
];
// List of gradients for the
// background of the pie chart
final gradientList = <List<Color>>[
[
Color.fromRGBO(223, 250, 92, 1),
Color.fromRGBO(129, 250, 112, 1),
],
[
Color.fromRGBO(129, 182, 205, 1),
Color.fromRGBO(91, 253, 199, 1),
],
[
Color.fromRGBO(175, 63, 62, 1.0),
Color.fromRGBO(254, 154, 92, 1),
]
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
centerTitle: true ,
title: const Text( "Pie Chart example" ),
),
body: Center(
child: PieChart(
// Pass in the data for
// the pie chart
dataMap: dataMap,
// Set the colors for the
// pie chart segments
colorList: colorList,
// Set the radius of the pie chart
chartRadius: MediaQuery.of(context).size.width / 2,
// Set the center text of the pie chart
centerText: "Budget" ,
// Set the width of the
// ring around the pie chart
ringStrokeWidth: 24,
// Set the animation duration of the pie chart
animationDuration: const Duration(seconds: 3),
// Set the options for the chart values (e.g. show percentages, etc.)
chartValuesOptions: const ChartValuesOptions(
showChartValues: true ,
showChartValuesOutside: true ,
showChartValuesInPercentage: true ,
showChartValueBackground: false ),
// Set the options for the legend of the pie chart
legendOptions: const LegendOptions(
showLegends: true ,
legendShape: BoxShape.rectangle,
legendTextStyle: TextStyle(fontSize: 15),
legendPosition: LegendPosition.bottom,
showLegendsInRow: true ),
// Set the list of gradients for
// the background of the pie chart
gradientList: gradientList,
),
),
);
}
|
Output:
Here is the final output of our application.