How to Display PieChart in Flutter

\n<h3 class=\"wp-block-heading\">At first create a database which contains order data and specially the status.</h3>\n\n\n\n<pre class=\"wp-block-code\"><code>-- Create the database\nCREATE DATABASE orders_db;\n\n-- Use the newly created database\nUSE orders_db;\n\n-- Create the orders table\nCREATE TABLE orders (\n id INT PRIMARY KEY,\n chk_bill_name VARCHAR(255),\n chk_bill_phone VARCHAR(20),\n chk_bill_email VARCHAR(255),\n chk_bill_country VARCHAR(100),\n chk_bill_state VARCHAR(100),\n chk_bill_city VARCHAR(100),\n chk_bill_zip VARCHAR(10),\n chk_bill_street_addr VARCHAR(255),\n chk_product_ids VARCHAR(255),\n chk_product_name VARCHAR(255),\n chk_net DECIMAL(10, 2),\n chk_date TIMESTAMP,\n chk_status VARCHAR(50),\n chk_payment_mode VARCHAR(50),\n chk_type VARCHAR(50),\n chk_payment_status VARCHAR(50),\n chk_request TEXT\n);\n</code></pre>\n\n\n\n<h3 class=\"wp-block-heading\">Create The Empty Flutter Screen Called OrderPieChart</h3>\n\n\n\n<pre class=\"wp-block-code\"><code>import 'package:flutter/cupertino.dart';\n\nclass OrderPieChart extends StatefulWidget {\n const OrderPieChart({super.key});\n\n @override\n State<OrderPieChart> createState() => _OrderPieChartState();\n}\n\nclass _OrderPieChartState extends State<OrderPieChart> {\n @override\n Widget build(BuildContext context) {\n return const Placeholder();\n }\n}\n</code></pre>\n\n\n\n<h3 class=\"wp-block-heading\">Install Necessary Packages in pubscpec.yaml</h3>\n\n\n\n<pre class=\"wp-block-preformatted\">pie_chart: ^5.4.0 </pre>\n\n\n\n<h3 class=\"wp-block-heading\">Import Dependencies in OrderPieChart Screen</h3>\n\n\n\n<pre class=\"wp-block-code\"><code>import 'package:pie_chart/pie_chart.dart';\nimport 'package:flutter/cupertino.dart';\n\nclass OrderPieChart extends StatefulWidget {\n const OrderPieChart({super.key});\n\n @override\n State<OrderPieChart> createState() => _OrderPieChartState();\n}\n\nclass _OrderPieChartState extends State<OrderPieChart> {\n @override\n Widget build(BuildContext context) {\n return const Placeholder();\n }\n}\n\n</code></pre>\n\n\n\n<h3 class=\"wp-block-heading\">Import Other Dependencies </h3>\n\n\n\n<pre class=\"wp-block-code\"><code>import 'package:flutter/cupertino.dart';\nimport 'package:shared_preferences/shared_preferences.dart';\nimport 'dart:convert';\nimport 'package:http/http.dart' as http;\nimport 'dart:async';</code></pre>\n\n\n\n<h3 class=\"wp-block-heading\">Create The Variables</h3>\n\n\n\n<pre class=\"wp-block-code\"><code> String id = \"\";\n String userName = \"\";\n String status = \"\";\n String phone = \"\";\n String userMobile = '';\n String userStudent = '';\n\n List<dynamic> _userData = [];\n bool _isLoading = true;\n bool _hasError = false;\n\n//Required For Pie Chart\nMap<String, double> dataMap = {\n \"Success\": 0,\n \"Pending\": 0,\n \"Cancelled\": 0,\n };</code></pre>\n\n\n\n<pre class=\"wp-block-code\"><code></code></pre>\n\n\n\n<h3 class=\"wp-block-heading\">Create Function to get User Details From The Shared Preferences</h3>\n\n\n\n<pre class=\"wp-block-code\"><code>Future<void> _getUserInfo() async {\n try {\n SharedPreferences prefs = await SharedPreferences.getInstance();\n String usermobile = prefs.getString('userMobile') ?? ''; // Get user mobile\n String userNameValue = prefs.getString('userName') ?? ''; // Get user name\n\n if (usermobile.isEmpty) {\n Navigator.push(\n context,\n MaterialPageRoute(\n builder: (context) => Login(),\n ),\n );\n } else {\n setState(() {\n userMobile = usermobile;\n userName = userNameValue; // Update userName\n });\n\n \n }\n } catch (error) {\n print('Error retrieving user info: $error');\n }\n }</code></pre>\n\n\n\n<h3 class=\"wp-block-heading\">Initiate _getUserInfo for default loading</h3>\n\n\n\n<pre class=\"wp-block-code\"><code> @override\n void initState() {\n super.initState();\n _getUserInfo();\n }</code></pre>\n\n\n\n<h3 class=\"wp-block-heading\">Create _checkout function to check order details</h3>\n\n\n\n<pre class=\"wp-block-preformatted\">Future<void> _checkOut() async {<br> final String apiUrl = 'https://indiawebdesigns.in/corporate-admin/controllers/Flutter/check_recordings.php?id=$userMobile';<br> try {<br> final response = await http.get(Uri.<em>parse</em>(apiUrl));<br><br> if (response.statusCode == 200) {<br> final List<dynamic> data = json.decode(response.body);<br> setState(() {<br> _userData = data;<br> _isLoading = false;<br> });<br> _updateDataMap(data);<br> } else {<br> throw Exception('Failed to load data');<br> }<br> } catch (error) {<br> setState(() {<br> _hasError = true;<br> _isLoading = false;<br> });<br> }<br>}</pre>\n\n\n\n<h3 class=\"wp-block-heading\">Now call _checkOut function once the _getUserInfo function is loaded up </h3>\n\n\n\n<pre class=\"wp-block-preformatted\">Future<void> _getUserInfo() async {<br> try {<br> SharedPreferences prefs = await SharedPreferences.<em>getInstance</em>();<br> String usermobile = prefs.getString('userMobile') ?? ''; // Get user mobile<br> String userNameValue = prefs.getString('userName') ?? ''; // Get user name<br><br> if (usermobile.isEmpty) {<br> Navigator.<em>push</em>(<br> context,<br> MaterialPageRoute(<br> builder: (context) => Login(),<br> ),<br> );<br> } else {<br> setState(() {<br> userMobile = usermobile;<br> userName = userNameValue; // Update userName<br> });<br><br> _checkOut();<br> }<br> } catch (error) {<br> print('Error retrieving user info: $error');<br> }<br>}</pre>\n\n\n\n<h3 class=\"wp-block-heading\">PHP Api code of fetching data using PHP</h3>\n\n\n\n<pre class=\"wp-block-code\"><code>\n<?php\nob_start();\ninclude('../../database.php');\nheader(\"Access-Control-Allow-Origin: *\");\nDB::connect();\n\n$id = $_GET['id'];\n\n$select_master_user = \"SELECT * FROM "checkout" where chk_bill_phone = '$id' and chk_type = 'Learn' order by id desc\";\n$sql999 = $dbconn->prepare($select_master_user);\n$sql999->execute();\n$wlvd999 = $sql999->fetchAll(PDO::FETCH_ASSOC);\n\n// Convert all values to strings\nforeach ($wlvd999 as &$item) {\n foreach ($item as &$value) {\n $value = (string)$value;\n }\n}\n\n$json = json_encode($wlvd999, JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT);\n\nheader('Content-Type: application/json; charset=utf-8');\necho str_replace('\\\\/', '/', $json);\n</code></pre>\n\n\n\n<h2 class=\"wp-block-heading\">Update The Dynamic List</h2>\n\n\n\n<pre class=\"wp-block-code\"><code> void _updateDataMap(List<dynamic> data) {\n Map<String, double> updatedDataMap = {\n \"Success\": 0,\n \"Pending\": 0,\n \"Cancelled\": 0,\n };\n\n for (var item in data) {\n String paymentStatus = item['chk_payment_status'];\n if (updatedDataMap.containsKey(paymentStatus)) {\n updatedDataMap[paymentStatus] = (updatedDataMap[paymentStatus] ?? 0) + 1;\n } else {\n updatedDataMap[paymentStatus] = 1;\n }\n }\n\n setState(() {\n dataMap = updatedDataMap;\n });\n }</code></pre>\n\n\n\n<h3 class=\"wp-block-heading\">Design the UI</h3>\n\n\n\n<pre class=\"wp-block-code\"><code>@override\n Widget build(BuildContext context) {\n return Scaffold(\n appBar: AppBar(\n title: Row(\n children: [\n Text('Hi ', style: TextStyle(color: Colors.white)),\n Text(userName, style: TextStyle(color: Colors.white)),\n ],\n ),\n backgroundColor: Colors.black,\n iconTheme: IconThemeData(color: Colors.white),\n ),\n body: SingleChildScrollView(\n child: Column(\n children: [\n SizedBox(height: 30,),\n PieChart(\n dataMap: dataMap,\n animationDuration: Duration(milliseconds: 800),\n chartLegendSpacing: 32,\n chartRadius: MediaQuery.of(context).size.width / 2.7,\n colorList: [Colors.green, Colors.orange, Colors.red],\n initialAngleInDegree: 0,\n chartType: ChartType.ring,\n ringStrokeWidth: 32,\n centerText: \"Orders\",\n legendOptions: LegendOptions(\n showLegendsInRow: false,\n legendPosition: LegendPosition.right,\n showLegends: true,\n legendShape: BoxShape.circle,\n legendTextStyle: TextStyle(\n fontWeight: FontWeight.bold,\n ),\n ),\n chartValuesOptions: ChartValuesOptions(\n showChartValueBackground: true,\n showChartValues: true,\n showChartValuesInPercentage: true,\n showChartValuesOutside: false,\n decimalPlaces: 1,\n ),\n ),\n\n ],\n ),\n ),\n );\n }</code></pre>\n\n\n\n<h3 class=\"wp-block-heading\">Complete Flutter Code</h3>\n\n\n\n<pre class=\"wp-block-code\"><code>import 'package:flutter/material.dart';\nimport 'package:pie_chart/pie_chart.dart';\nimport 'package:prodwebotapp/Login/login.dart';\nimport 'package:flutter/cupertino.dart';\nimport 'package:shared_preferences/shared_preferences.dart';\nimport 'dart:convert';\nimport 'package:http/http.dart' as http;\nimport 'dart:async';\nimport 'MyCourseNew.dart';\n\nclass OrderPieChart extends StatefulWidget {\n @override\n State<OrderPieChart> createState() => _OrderPieChartState();\n}\n\nclass _OrderPieChartState extends State<OrderPieChart> {\n String id = \"\";\n String userName = \"\";\n String status = \"\";\n String phone = \"\";\n String userMobile = '';\n String userStudent = '';\n\n List<dynamic> _userData = [];\n bool _isLoading = true;\n bool _hasError = false;\n\n Map<String, double> dataMap = {\n \"Success\": 0,\n \"Pending\": 0,\n \"Cancelled\": 0,\n };\n\n @override\n void initState() {\n super.initState();\n _getUserInfo();\n }\n\n Future<void> _getUserInfo() async {\n try {\n SharedPreferences prefs = await SharedPreferences.getInstance();\n String usermobile = prefs.getString('userMobile') ?? ''; // Get user mobile\n String userNameValue = prefs.getString('userName') ?? ''; // Get user name\n\n if (usermobile.isEmpty) {\n Navigator.push(\n context,\n MaterialPageRoute(\n builder: (context) => Login(),\n ),\n );\n } else {\n setState(() {\n userMobile = usermobile;\n userName = userNameValue; // Update userName\n });\n\n _checkOut();\n }\n } catch (error) {\n print('Error retrieving user info: $error');\n }\n }\n\n Future<void> _checkOut() async {\n final String apiUrl = 'https://indiawebdesigns.in/corporate-admin/controllers/Flutter/check_recordings.php?id=$userMobile';\n try {\n final response = await http.get(Uri.parse(apiUrl));\n\n if (response.statusCode == 200) {\n final List<dynamic> data = json.decode(response.body);\n setState(() {\n _userData = data;\n _isLoading = false;\n });\n _updateDataMap(data);\n } else {\n throw Exception('Failed to load data');\n }\n } catch (error) {\n setState(() {\n _hasError = true;\n _isLoading = false;\n });\n }\n }\n\n void _updateDataMap(List<dynamic> data) {\n Map<String, double> updatedDataMap = {\n \"Success\": 0,\n \"Pending\": 0,\n \"Cancelled\": 0,\n };\n\n for (var item in data) {\n String paymentStatus = item['chk_payment_status'];\n if (updatedDataMap.containsKey(paymentStatus)) {\n updatedDataMap[paymentStatus] = (updatedDataMap[paymentStatus] ?? 0) + 1;\n } else {\n updatedDataMap[paymentStatus] = 1;\n }\n }\n\n setState(() {\n dataMap = updatedDataMap;\n });\n }\n\n @override\n Widget build(BuildContext context) {\n return Scaffold(\n appBar: AppBar(\n title: Row(\n children: [\n Text('Hi ', style: TextStyle(color: Colors.white)),\n Text(userName, style: TextStyle(color: Colors.white)),\n ],\n ),\n backgroundColor: Colors.black,\n iconTheme: IconThemeData(color: Colors.white),\n ),\n body: SingleChildScrollView(\n child: Column(\n children: [\n SizedBox(height: 30,),\n PieChart(\n dataMap: dataMap,\n animationDuration: Duration(milliseconds: 800),\n chartLegendSpacing: 32,\n chartRadius: MediaQuery.of(context).size.width / 2.7,\n colorList: [Colors.green, Colors.orange, Colors.red],\n initialAngleInDegree: 0,\n chartType: ChartType.ring,\n ringStrokeWidth: 32,\n centerText: \"Orders\",\n legendOptions: LegendOptions(\n showLegendsInRow: false,\n legendPosition: LegendPosition.right,\n showLegends: true,\n legendShape: BoxShape.circle,\n legendTextStyle: TextStyle(\n fontWeight: FontWeight.bold,\n ),\n ),\n chartValuesOptions: ChartValuesOptions(\n showChartValueBackground: true,\n showChartValues: true,\n showChartValuesInPercentage: true,\n showChartValuesOutside: false,\n decimalPlaces: 1,\n ),\n ),\n\n ],\n ),\n ),\n );\n }\n}\n</code></pre>\n