Dalam pengembangan aplikasi Flutter, seringkali kita perlu memvisualisasikan data dalam bentuk diagram donat atau donut chart. Salah satu library yang dapat digunakan untuk membuat donut chart yang kaya fitur adalah Syncfusion Flutter Charts. Dalam artikel ini, kita akan menjelajahi cara membuat donut 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 donut 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>[         DoughnutSeries<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,           ),         ),       ],     );   } }

Di dalam widget ChartWidget, kita menggunakan SfCircularChart dan DoughnutSeries dari Syncfusion Flutter Charts. Data untuk donut chart diinisialisasi menggunakan dataSource, dan xValueMapper dan yValueMapper digunakan untuk menentukan data yang akan ditampilkan pada label dan nilai donut chart. Kita juga mengatur dataLabelSettings menjadi isVisible: true untuk menampilkan label pada donut chart.

Kesimpulan

Dalam artikel ini, kita telah mengeksplorasi cara membuat doughnut chart menggunakan Syncfusion Flutter Charts. Langkah-langkahnya meliputi mengimpor library, membuat widget chart, dan menggunakan widget tersebut dalam aplikasi Flutter