Cara Memvisualisasikan Data di Flutter dengan fl_chart dan Back4App

24min
Pendahuluan
Visualisasi data adalah aspek penting dari aplikasi modern, membantu pengguna memahami data yang kompleks melalui grafik dan diagram yang intuitif. Dalam tutorial ini, Anda akan belajar bagaimana cara membuat grafik interaktif dan menarik secara visual dalam aplikasi Flutter Anda menggunakan paket fl_chart. Selain itu, Anda akan mengintegrasikan Back4App—sebuah platform backend-as-a-service (BaaS) yang didukung oleh Parse Server—untuk menyimpan dan mengambil data untuk grafik Anda. Pada akhir tutorial ini, Anda akan memiliki aplikasi Flutter yang sepenuhnya fungsional yang menampilkan data dinamis yang diambil dari Back4App menggunakan berbagai jenis grafik seperti grafik garis, batang, dan pai.
Prasyarat
Untuk menyelesaikan tutorial ini, Anda akan membutuhkan:
A akun Back4App. Jika Anda belum memiliki satu, Anda dapat mendaftar untuk akun gratis di Back4App.
Flutter SDK terinstal di mesin lokal Anda. Anda dapat mengikuti panduan instalasi Flutter resmi untuk sistem operasi Anda.
Pengetahuan dasar tentang Dart dan Flutter. Jika Anda baru mengenal Flutter, pertimbangkan untuk meninjau dokumentasi Flutter untuk membiasakan diri dengan dasar-dasarnya.
Parse Server SDK untuk Flutter ditambahkan ke proyek Anda. Anda dapat belajar cara mengaturnya dengan mengikuti Panduan SDK Flutter Back4App.
Sebuah IDE atau editor teks seperti Visual Studio Code atau Android Studio.
Langkah 1 – Menyiapkan Backend Back4App
Dalam langkah ini, Anda akan membuat aplikasi Back4App baru dan menyiapkan kelas data untuk menyimpan data grafik Anda.
1.1. Buat Aplikasi Back4App Baru
Masuk ke dasbor Back4App.
Klik pada "Buat aplikasi baru".
Masukkan nama untuk aplikasi Anda, misalnya, "FlutterChartApp", dan klik "Buat".
1.2. Siapkan Model Data
Di dasbor aplikasi Anda, navigasikan ke bagian "Database" di sidebar kiri.
Klik pada "Buat kelas" di bagian atas halaman.
Di modal yang muncul:
Pilih "Kustom".
Masukkan "SalesData" sebagai nama kelas.
Klik "Buat kelas".
1.3. Tambahkan Kolom ke Kelas
Di kelas "SalesData" klik pada "+" untuk menambahkan kolom baru.
Tambahkan kolom berikut:
bulan: Ketik String
penjualan: Ketik Nomor
Model data Anda sekarang sudah disiapkan untuk menyimpan data penjualan bulanan, yang akan Anda visualisasikan di aplikasi Flutter Anda.
Langkah 2 – Mengisi Database dengan Data Contoh
Sebelum mengambil data di aplikasi Anda, Anda memerlukan beberapa data contoh di database Back4App Anda.
Masih di kelas "SalesData" klik pada "+" untuk menambahkan baris baru.
Masukkan data contoh berikut:
Ulangi langkah di atas untuk menambahkan semua entri data contoh.
Langkah 3 – Menyiapkan Proyek Flutter
Dalam langkah ini, Anda akan membuat proyek Flutter baru dan menambahkan ketergantungan yang diperlukan.
3.1. Buat Proyek Flutter Baru
Buka terminal Anda dan jalankan:
Bash
flutter create flutter_chart_app
flutter create flutter_chart_app
﻿
Navigasikan ke direktori proyek:
Bash
cd flutter_chart_app
cd flutter_chart_app
﻿
3.2. Tambahkan Ketergantungan ke pubspec.yaml
Buka pubspec.yaml dan tambahkan ketergantungan berikut:
YAML
dependencies:
  flutter:
    sdk: flutter
  fl_chart: ^0.60.0
  parse_server_sdk_flutter: ^4.0.1
dependencies:
  flutter:
    sdk: flutter
  fl_chart: ^0.60.0
  parse_server_sdk_flutter: ^4.0.1
﻿
Jalankan flutter pub get untuk menginstal paket.
Langkah 4 – Menginisialisasi Parse di Aplikasi Flutter Anda
Untuk menghubungkan aplikasi Flutter Anda dengan Back4App, Anda perlu menginisialisasi SDK Parse.
4.1. Dapatkan Kredensial Aplikasi Back4App
Di dasbor Back4App Anda, navigasikan ke "Pengaturan Aplikasi" > "Keamanan & Kunci".
Catat ID Aplikasi dan Kunci Klien Anda.
4.2. Inisialisasi Parse di main.dart
Buka lib/main.dart dan ubah seperti berikut:
Dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import 'home_page.dart'; // You'll create this file in the next step

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  const keyApplicationId = 'YOUR_APPLICATION_ID';
  const keyClientKey = 'YOUR_CLIENT_KEY';
  const keyParseServerUrl = 'https://parseapi.back4app.com';

  await Parse().initialize(
    keyApplicationId,
    keyParseServerUrl,
    clientKey: keyClientKey,
    debug: true,
  );

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Chart App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import 'home_page.dart'; // You'll create this file in the next step

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  const keyApplicationId = 'YOUR_APPLICATION_ID';
  const keyClientKey = 'YOUR_CLIENT_KEY';
  const keyParseServerUrl = 'https://parseapi.back4app.com';

  await Parse().initialize(
    keyApplicationId,
    keyParseServerUrl,
    clientKey: keyClientKey,
    debug: true,
  );

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Chart App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}
﻿
Ganti 'YOUR_APPLICATION_ID' dan 'YOUR_CLIENT_KEY' dengan kredensial yang Anda peroleh dari Back4App.
Langkah 5 – Mengambil Data dari Back4App
Dalam langkah ini, Anda akan mengambil data penjualan dari Back4App menggunakan Parse SDK.
5.1. Buat home_page.dart
Buat file baru lib/home_page.dart dan tambahkan kode berikut:
Dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import 'package:fl_chart/fl_chart.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class SalesData {
  final String month;
  final double sales;

  SalesData(this.month, this.sales);
}

class _HomePageState extends State<HomePage> {
  List<SalesData> chartData = [];

  @override
  void initState() {
    super.initState();
    fetchSalesData();
  }

  Future<void> fetchSalesData() async {
    final QueryBuilder<ParseObject> query =
        QueryBuilder<ParseObject>(ParseObject('SalesData'));

    final ParseResponse apiResponse = await query.query();

    if (apiResponse.success && apiResponse.results != null) {
      setState(() {
        chartData = apiResponse.results!.map((data) {
          final month = data.get<String>('month') ?? '';
          final sales = data.get<num>('sales')?.toDouble() ?? 0.0;
          return SalesData(month, sales);
        }).toList();
      });
    } else {
      // Handle errors
      print('Error fetching data: ${apiResponse.error?.message}');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Sales Chart'),
        ),
        body: chartData.isEmpty
            ? Center(child: CircularProgressIndicator())
            : Padding(
                padding: const EdgeInsets.all(16.0),
                child: LineChart(
                  LineChartData(
                    minY: 0,
                    maxY: 250,
                    titlesData: FlTitlesData(
                      leftTitles: AxisTitles(
                        sideTitles: SideTitles(showTitles: true),
                      ),
                      bottomTitles: AxisTitles(
                        sideTitles: SideTitles(
                          showTitles: true,
                          getTitlesWidget: bottomTitleWidgets,
                          interval: 1,
                        ),
                      ),
                    ),
                    gridData: FlGridData(show: true),
                    borderData: FlBorderData(
                      show: true,
                      border: Border.all(color: Colors.grey),
                    ),
                    lineBarsData: [
                      LineChartBarData(
                        spots: chartData
                            .asMap()
                            .entries
                            .map((e) => FlSpot(
                                e.key.toDouble(), e.value.sales))
                            .toList(),
                        isCurved: true,
                        barWidth: 3,
                        colors: [Colors.blue],
                        dotData: FlDotData(show: true),
                      ),
                    ],
                  ),
                ),
              ));
  }

  Widget bottomTitleWidgets(double value, TitleMeta meta) {
    const style = TextStyle(
      fontSize: 12,
    );
    Widget text;
    int index = value.toInt();
    if (index >= 0 && index < chartData.length) {
      text = Text(chartData[index].month.substring(0, 3), style: style);
    } else {
      text = Text('', style: style);
    }
    return SideTitleWidget(
      axisSide: meta.axisSide,
      child: text,
    );
  }
}
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import 'package:fl_chart/fl_chart.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class SalesData {
  final String month;
  final double sales;

  SalesData(this.month, this.sales);
}

class _HomePageState extends State<HomePage> {
  List<SalesData> chartData = [];

  @override
  void initState() {
    super.initState();
    fetchSalesData();
  }

  Future<void> fetchSalesData() async {
    final QueryBuilder<ParseObject> query =
        QueryBuilder<ParseObject>(ParseObject('SalesData'));

    final ParseResponse apiResponse = await query.query();

    if (apiResponse.success && apiResponse.results != null) {
      setState(() {
        chartData = apiResponse.results!.map((data) {
          final month = data.get<String>('month') ?? '';
          final sales = data.get<num>('sales')?.toDouble() ?? 0.0;
          return SalesData(month, sales);
        }).toList();
      });
    } else {
      // Handle errors
      print('Error fetching data: ${apiResponse.error?.message}');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Sales Chart'),
        ),
        body: chartData.isEmpty
            ? Center(child: CircularProgressIndicator())
            : Padding(
                padding: const EdgeInsets.all(16.0),
                child: LineChart(
                  LineChartData(
                    minY: 0,
                    maxY: 250,
                    titlesData: FlTitlesData(
                      leftTitles: AxisTitles(
                        sideTitles: SideTitles(showTitles: true),
                      ),
                      bottomTitles: AxisTitles(
                        sideTitles: SideTitles(
                          showTitles: true,
                          getTitlesWidget: bottomTitleWidgets,
                          interval: 1,
                        ),
                      ),
                    ),
                    gridData: FlGridData(show: true),
                    borderData: FlBorderData(
                      show: true,
                      border: Border.all(color: Colors.grey),
                    ),
                    lineBarsData: [
                      LineChartBarData(
                        spots: chartData
                            .asMap()
                            .entries
                            .map((e) => FlSpot(
                                e.key.toDouble(), e.value.sales))
                            .toList(),
                        isCurved: true,
                        barWidth: 3,
                        colors: [Colors.blue],
                        dotData: FlDotData(show: true),
                      ),
                    ],
                  ),
                ),
              ));
  }

  Widget bottomTitleWidgets(double value, TitleMeta meta) {
    const style = TextStyle(
      fontSize: 12,
    );
    Widget text;
    int index = value.toInt();
    if (index >= 0 && index < chartData.length) {
      text = Text(chartData[index].month.substring(0, 3), style: style);
    } else {
      text = Text('', style: style);
    }
    return SideTitleWidget(
      axisSide: meta.axisSide,
      child: text,
    );
  }
}
﻿
Penjelasan
SalesData Class: Kelas model sederhana untuk menyimpan data bulan dan data penjualan.
fetchSalesData(): Mengambil data dari SalesData kelas di Back4App dan memperbarui chartData daftar.
LineChart: Menggunakan fl_chart untuk membuat grafik garis berdasarkan data yang diambil.
bottomTitleWidgets(): Mengkustomisasi label sumbu bawah untuk menampilkan singkatan bulan.
Langkah 6 – Menjalankan Aplikasi
Sekarang setelah Anda mengatur frontend dan backend, saatnya untuk menjalankan aplikasi Anda.
Di terminal Anda, navigasikan ke direktori proyek Anda.
Jalankan aplikasi menggunakan:
Bash
flutter run
flutter run
﻿
Anda seharusnya melihat grafik garis yang menampilkan data penjualan untuk setiap bulan.
Langkah 7 – Menambahkan Interaktivitas dan Kustomisasi
Untuk membuat grafik Anda lebih interaktif dan menarik secara visual, Anda dapat menyesuaikannya lebih lanjut.
7.1. Sesuaikan Penampilan Grafik
Modifikasi LineChartBarData di metode build Anda:
Dart
LineChartBarData(
  spots: chartData
      .asMap()
      .entries
      .map((e) => FlSpot(
          e.key.toDouble(), e.value.sales))
      .toList(),
  isCurved: true,
  barWidth: 3,
  colors: [Colors.blue],
  belowBarData: BarAreaData(
    show: true,
    colors: [Colors.blue.withOpacity(0.3)],
  ),
  dotData: FlDotData(
    show: true,
  ),
)
LineChartBarData(
  spots: chartData
      .asMap()
      .entries
      .map((e) => FlSpot(
          e.key.toDouble(), e.value.sales))
      .toList(),
  isCurved: true,
  barWidth: 3,
  colors: [Colors.blue],
  belowBarData: BarAreaData(
    show: true,
    colors: [Colors.blue.withOpacity(0.3)],
  ),
  dotData: FlDotData(
    show: true,
  ),
)
﻿
belowBarData: Menambahkan area terisi di bawah garis.
dotData: Menampilkan titik di setiap titik data.
7.2. Aktifkan Interaksi Sentuh
Anda dapat mengaktifkan interaksi sentuh untuk menampilkan tooltip.
Tambahkan yang berikut ke LineChartData:
Dart
touchData: LineTouchData(
  touchTooltipData: LineTouchTooltipData(
    tooltipBgColor: Colors.blueAccent,
  ),
),
touchData: LineTouchData(
  touchTooltipData: LineTouchTooltipData(
    tooltipBgColor: Colors.blueAccent,
  ),
),
﻿
Langkah 8 – Menampilkan Berbagai Jenis Grafik
Anda juga dapat menampilkan jenis grafik lainnya menggunakan fl_chart.
8.1. Contoh Grafik Lingkaran
Ganti LineChart di metode build Anda dengan PieChart:
Dart
PieChart(
  PieChartData(
    sections: chartData.map((data) {
      return PieChartSectionData(
        value: data.sales,
        title: data.month.substring(0, 3),
        color: Colors.primaries[chartData.indexOf(data) % Colors.primaries.length],
      );
    }).toList(),
    sectionsSpace: 2,
    centerSpaceRadius: 40,
  ),
)
PieChart(
  PieChartData(
    sections: chartData.map((data) {
      return PieChartSectionData(
        value: data.sales,
        title: data.month.substring(0, 3),
        color: Colors.primaries[chartData.indexOf(data) % Colors.primaries.length],
      );
    }).toList(),
    sectionsSpace: 2,
    centerSpaceRadius: 40,
  ),
)
﻿
PieChartSectionData: Mendefinisikan setiap bagian dari diagram lingkaran.
Kesimpulan
Dalam tutorial ini, Anda belajar bagaimana menggunakan paket fl_chart untuk memvisualisasikan data dalam aplikasi Flutter Anda. Anda mengintegrasikan Back4App sebagai solusi backend untuk menyimpan dan mengambil data menggunakan Parse SDK. Dengan mengambil data dari Back4App dan menampilkannya menggunakan berbagai jenis grafik, Anda sekarang dapat membangun visualisasi data yang dinamis dan interaktif dalam aplikasi Flutter Anda.
Untuk lebih meningkatkan aplikasi Anda, pertimbangkan untuk menjelajahi jenis grafik lain yang disediakan oleh fl_chart, seperti grafik batang dan grafik radar. Anda juga dapat menerapkan pembaruan data secara real-time dengan mengintegrasikan Live Queries dari Back4App.
Sumber Daya Tambahan:
﻿Dokumentasi Back4App﻿
﻿Paket fl_chart di pub.dev﻿
﻿Panduan Parse SDK untuk Flutter﻿
﻿Dokumentasi Resmi Flutter﻿
Silakan pastikan untuk mengganti nilai placeholder seperti 'YOUR_APPLICATION_ID' dan 'YOUR_CLIENT_KEY' dengan kredensial Back4App Anda yang sebenarnya. Selamat coding!
Diperbarui 24 Jan 2025
Apakah halaman ini membantu Anda?
SEBELUMNYA
Cara Membangun Game Endless Runner Lanjutan Menggunakan Flutter, Toolkit Game Kasual, dan Back4app
BERIKUTNYA
Panduan Lengkap untuk Autentikasi Pihak Ketiga di Flutter dengan Parse di Back4App