Dalam pengembangan aplikasi Flutter, seringkali kita perlu memvisualisasikan data dalam bentuk diagram lingkaran atau pie chart. Salah satu library yang dapat digunakan untuk membuat pie chart yang kaya fitur adalah Syncfusion Flutter Charts. Dalam artikel ini, kita akan menjelajahi cara membuat pie chart menggunakan Syncfusion Flutter Charts dan tata cara yang diperlukan untuk mengimplementasikannya dalam aplikasi Flutter.
Klik untuk menuju link library Syncfusion Flutter Charts
Langkah 1: Mengimpor Library
Pertama-tama, kita perlu mengimpor library Syncfusion Flutter Charts ke dalam proyek Flutter kita. Buka file pubspec.yaml dan tambahkan dependensi berikut di bawah dependensi lainnya:
| dependencies: syncfusion_flutter_charts: ^21.2.3 |
Setelah itu, jalankan perintah flutter pub get untuk mengunduh dan menginstal dependensi baru.
Langkah 2: Membuat Widget Chart
Selanjutnya, kita perlu membuat widget chart di dalam aplikasi Flutter kita. Misalnya, kita akan membuat pie chart sederhana.
| import ‘package:flutter/material.dart’; import ‘package:syncfusion_flutter_charts/charts.dart’; class ChartWidget extends StatelessWidget { @override Widget build(BuildContext context) { return SfCircularChart( series: <CircularSeries>[ PieSeries<Map<String, dynamic>, String>( dataSource: <Map<String, dynamic>>[ {‘label’: ‘A’, ‘value’: 10}, {‘label’: ‘B’, ‘value’: 20}, {‘label’: ‘C’, ‘value’: 15}, {‘label’: ‘D’, ‘value’: 25}, ], xValueMapper: (Map<String, dynamic> data, _) => data[‘label’], yValueMapper: (Map<String, dynamic> data, _) => data[‘value’], dataLabelSettings: DataLabelSettings( isVisible: true, ), ), ], legend: Legend( isVisible: true, ), ); } } |
Di dalam widget ChartWidget, kita menggunakan SfCircularChart dan PieSeries dari Syncfusion Flutter Charts. Data untuk pie chart diinisialisasi menggunakan dataSource, dan xValueMapper dan yValueMapper digunakan untuk menentukan data yang akan ditampilkan pada label dan nilai pie chart. Kita juga mengatur dataLabelSettings menjadi isVisible: true untuk menampilkan label pada pie chart.
Kesimpulan
Dalam artikel ini, kita telah mengeksplorasi cara membuat pie chart menggunakan Syncfusion Flutter Charts