How to draw a Pie Chart in Flutter

<p>In this tutorial, we are going to see how to draw a pie chart in a flutter app. We are going to use **pie_chart **package to accomplish this task. The following illustration shows how our app will look after this tutorial.</p> <p id="569cd6;](true;" _loadChart="color:">![](../../../Uploads/ef0b4b3d-3821-41e4-946e-1fc1dddcdb23.gifwidth="50%height="auto]( **Step 1: **Add the package dependency to your **pubspec.yaml **file.color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: "Droid Sans Mono", monospace, monospace, "Droid Sans Fallback"; font-size: 14px; line-height: 19px; white-space: pre-wrap;](color: #569cd6;](dependencies: color: #569cd6;](flutter: color: #569cd6;](sdk: color: #ce9178;](flutter color: #569cd6;](pie_chart: color: #ce9178;](^3.1.1 **Step 2: **Use the following code in your **main.dart **file. After the code, I've outlined a few points after the code.color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: "Droid Sans Mono", monospace, monospace, "Droid Sans Fallback"; font-size: 14px; line-height: 19px; white-space: pre-wrap;](color: #569cd6;](import color: #ce9178;]('package:flutter/material.dart';color: #569cd6;](import color: #ce9178;]('package:pie_chart/pie_chart.dart'; color: rgb(106, 153, 85);](// import the package color: #569cd6;](void color: #dcdcaa;](main() => color: #dcdcaa;](runApp(color: #4ec9b0;](MyApp()); color: #569cd6;](class color: #4ec9b0;](MyApp color: #569cd6;](extends color: #4ec9b0;](StatelessWidget { color: #569cd6;](@override color: #4ec9b0;](Widget color: #dcdcaa;](build(color: #4ec9b0;](BuildContext context) { color: #c586c0;](return color: #4ec9b0;](MaterialApp( debugShowCheckedModeBanner: color: #569cd6;](false, title: color: #ce9178;]('Pie Chart Demo', theme: color: #4ec9b0;](ThemeData( primarySwatch: color: #4ec9b0;](Colors.blue, ), home: color: #4ec9b0;](MyHomePage(title: color: #ce9178;]('Pie Chart Demo'), ); }} color: #569cd6;](class color: #4ec9b0;](MyHomePage color: #569cd6;](extends color: #4ec9b0;](StatefulWidget { color: #4ec9b0;](MyHomePage({color: #4ec9b0;](Key key, color: #569cd6;](this.title}) : color: #569cd6;](super(key: key); color: #569cd6;](final color: #4ec9b0;](String title; color: #569cd6;](@override color: #4ec9b0;](_MyHomePageState color: #dcdcaa;](createState() => color: #4ec9b0;](_MyHomePageState();} color: #569cd6;](class color: #4ec9b0;](_MyHomePageState color: #569cd6;](extends color: #4ec9b0;](State { color: #4ec9b0;](Map data = color: #c586c0;](new color: #4ec9b0;](Map(); color: #569cd6;](bool _loadChart = color: #569cd6;](false; color: #569cd6;](@override color: #569cd6;](void color: #dcdcaa;](initState() { data.color: #dcdcaa;](addAll({ color: #ce9178;]('Flutter': color: #b5cea8;](37136, color: #ce9178;]('React Native': color: #b5cea8;](69687, color: #ce9178;]('Xamarin': color: #b5cea8;](40609, color: #ce9178;]('Ionic': color: #b5cea8;](42544 }); color: #569cd6;](super.color: #dcdcaa;](initState(); } color: #4ec9b0;](List _colors = [ color: #4ec9b0;](Colors.teal, color: #4ec9b0;](Colors.blueAccent, color: #4ec9b0;](Colors.amberAccent, color: #4ec9b0;](Colors.redAccent ]; color: #569cd6;](@override color: #4ec9b0;](Widget color: #dcdcaa;](build(color: #4ec9b0;](BuildContext context) { color: #c586c0;](return color: #4ec9b0;](Scaffold( appBar: color: #4ec9b0;](AppBar( title: color: #4ec9b0;](Text(widget.title), ), body: color: #4ec9b0;](Center( child: color: #4ec9b0;](Column( children: [ color: #4ec9b0;](SizedBox( height: color: #b5cea8;](50, ), color: #4ec9b0;](Text( color: #ce9178;]('Number of Questions asked on StackOverflow', textAlign: color: #4ec9b0;](TextAlign.center, style: color: #4ec9b0;](TextStyle(fontSize: color: #b5cea8;](24, fontWeight: color: #4ec9b0;](FontWeight.bold), ), color: #4ec9b0;](SizedBox( height: color: #b5cea8;](50, ), _loadChart ? color: #4ec9b0;](PieChart( dataMap: data, colorList: _colors, color: #6a9955;](// if not declared, random colors will be chosen animationDuration: color: #4ec9b0;](Duration(milliseconds: color: #b5cea8;](1500), chartLegendSpacing: color: #b5cea8;](32.0, chartRadius: color: #4ec9b0;](MediaQuery.color: #dcdcaa;](of(context).size.width / color: #b5cea8;](2.7, color: #6a9955;](//determines the size of the chart showChartValuesInPercentage: color: #569cd6;](true, showChartValues: color: #569cd6;](true, showChartValuesOutside: color: #569cd6;](false, chartValueBackgroundColor: color: #4ec9b0;](Colors.grey[color: #b5cea8;](200], showLegends: color: #569cd6;](true, legendPosition: color: #4ec9b0;](LegendPosition.right, color: #6a9955;](//can be changed to top, left, bottom decimalPlaces: color: #b5cea8;](1, showChartValueLabel: color: #569cd6;](true, initialAngle: color: #b5cea8;](0, chartValueStyle: defaultChartValueStyle.color: #dcdcaa;](copyWith( color: color: #4ec9b0;](Colors.blueGrey[color: #b5cea8;](900].color: #dcdcaa;](withOpacity(color: #b5cea8;](0.9), ), chartType: color: #4ec9b0;](ChartType.disc, color: #6a9955;](//can be changed to ChartType.ring ) : color: #4ec9b0;](SizedBox( height: color: #b5cea8;](150, ), color: #4ec9b0;](SizedBox( height: color: #b5cea8;](50, ), color: #4ec9b0;](RaisedButton( color: color: #4ec9b0;](Colors.blue, child: color: #4ec9b0;](Text(color: #ce9178;]('Click to Show Chart', style: color: #4ec9b0;](TextStyle( color: color: #4ec9b0;](Colors.white ),), onPressed: () { color: #dcdcaa;](setState(() ); }, ), ], ), ), ); }} **Quick Overview:****1. **The PieChart widget takes input data for the pie chart as a Map of <em>String keys</em> and *double values. *We declare a map and assign values to it inside the initState() method.<strong>2. PieChart</strong> provides a smooth animation out of the box. To depict it more clearly, I have used a RaisedButton(). When _loadChart is true, the PieChart is displayed else a SizedBox is displayed. On pressing the button, the boolean value **_loadChart **is set to true and MyHomePage widget is rebuilt, finally showing up our PieChart on screen. Hope you liked it :) <em>Leave a comment below if you need any help.</em> Thank You!</p>