Cara Memvisualisasikan Data di Flutter dengan fl_chart dan Back4App

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 https //www back4app com/ flutter sdk terinstal di mesin lokal anda anda dapat mengikuti panduan instalasi flutter resmi https //flutter dev/docs/get started/install untuk sistem operasi anda pengetahuan dasar tentang dart dan flutter jika anda baru mengenal flutter, pertimbangkan untuk meninjau dokumentasi flutter https //flutter dev/docs 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 https //www back4app com/docs/flutter/parse flutter sdk 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 https //dashboard back4app com/ 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 flutter create flutter chart app navigasikan ke direktori proyek cd flutter chart app 3 2 tambahkan ketergantungan ke pubspec yaml buka pubspec yaml dan tambahkan ketergantungan berikut 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 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 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 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 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 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 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 https //www back4app com/docs paket fl chart di pub dev https //pub dev/packages/fl chart panduan parse sdk untuk flutter https //docs parseplatform org/flutter/guide/ dokumentasi resmi flutter https //flutter dev/docs silakan pastikan untuk mengganti nilai placeholder seperti 'your application id' dan 'your client key' dengan kredensial back4app anda yang sebenarnya selamat coding!