Come visualizzare i dati in Flutter con fl_chart e Back4App

introduzione la visualizzazione dei dati è un aspetto cruciale delle applicazioni moderne, aiutando gli utenti a comprendere dati complessi attraverso grafici e diagrammi intuitivi in questo tutorial, imparerai come creare grafici interattivi e visivamente accattivanti nella tua applicazione flutter utilizzando il fl chart pacchetto inoltre, integrerai back4app—una piattaforma backend as a service (baas) alimentata da parse server—per memorizzare e recuperare dati per i tuoi grafici alla fine di questo tutorial, avrai un'app flutter completamente funzionale che visualizza dati dinamici recuperati da back4app utilizzando vari tipi di grafici come grafici a linee, a barre e a torta prerequisiti per completare questo tutorial, avrai bisogno di un account back4app se non ne hai uno, puoi registrarti per un account gratuito su back4app https //www back4app com/ flutter sdk installato sul tuo computer locale puoi seguire la guida ufficiale all'installazione di flutter https //flutter dev/docs/get started/install per il tuo sistema operativo conoscenze di base di dart e flutter se sei nuovo a flutter, considera di rivedere la documentazione di flutter https //flutter dev/docs per familiarizzare con le basi parse server sdk per flutter aggiunto al tuo progetto puoi imparare come configurarlo seguendo la guida al sdk flutter di back4app https //www back4app com/docs/flutter/parse flutter sdk un ide o editor di testo come visual studio code o android studio passo 1 – configurazione del backend di back4app in questo passo, creerai una nuova applicazione back4app e configurerai una classe di dati per memorizzare i dati del tuo grafico 1 1 crea una nuova applicazione back4app accedi al tuo dashboard di back4app https //dashboard back4app com/ clicca su "crea nuova app" inserisci un nome per la tua applicazione, ad esempio, "flutterchartapp" , e clicca su "crea" 1 2 configurare il modello di dati nella dashboard della tua applicazione, vai alla "database" sezione nella barra laterale sinistra clicca su "crea una classe" in cima alla pagina nella finestra modale che appare seleziona "personalizzato" inserisci "salesdata" come nome della classe clicca "crea classe" 1 3 aggiungere colonne alla classe nella classe "salesdata" clicca su "+" per aggiungere una nuova colonna aggiungi le seguenti colonne mese tipo stringa vendite tipo numero il tuo modello di dati è ora configurato per memorizzare i dati di vendita mensili, che visualizzerai nella tua app flutter passo 2 – popolare il database con dati di esempio prima di recuperare i dati nella tua app, hai bisogno di alcuni dati di esempio nel tuo database back4app ancora nella classe "salesdata" clicca su "+" per aggiungere una nuova riga inserisci i seguenti dati di esempio ripeti i passaggi sopra per aggiungere tutte le voci di dati di esempio passo 3 – configurare il progetto flutter in questo passaggio, creerai un nuovo progetto flutter e aggiungerai le dipendenze necessarie 3 1 crea un nuovo progetto flutter apri il tuo terminale e esegui flutter create flutter chart app naviga nella directory del progetto cd flutter chart app 3 2 aggiungi dipendenze a pubspec yaml apri pubspec yaml e aggiungi le seguenti dipendenze dependencies flutter sdk flutter fl chart ^0 60 0 parse server sdk flutter ^4 0 1 esegui flutter pub get per installare i pacchetti passo 4 – inizializzazione di parse nella tua app flutter per collegare la tua app flutter a back4app, devi inizializzare il sdk di parse 4 1 ottieni le credenziali dell'applicazione back4app nel tuo dashboard di back4app, vai a "impostazioni app" > "sicurezza e chiavi" annota il tuo id applicazione e chiave client 4 2 inizializza parse in main dart apri lib/main dart e modificalo come segue 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(), ); } } sostituisci 'your application id' e 'your client key' con le credenziali ottenute da back4app passo 5 – recupero dei dati da back4app in questo passo, recupererai i dati di vendita da back4app utilizzando il parse sdk 5 1 crea home page dart crea un nuovo file lib/home page dart e aggiungi il seguente codice 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, ); } } spiegazione salesdata class una semplice classe modello per contenere i dati del mese e delle vendite fetchsalesdata() recupera i dati dalla salesdata classe in back4app e aggiorna la chartdata lista linechart usa fl chart , per creare un grafico a linee basato sui dati recuperati bottomtitlewidgets() personalizza le etichette dell'asse inferiore per visualizzare le abbreviazioni dei mesi passo 6 – esecuzione dell'app ora che hai configurato il frontend e il backend, è tempo di eseguire la tua app nel tuo terminale, naviga nella directory del tuo progetto esegui l'app utilizzando flutter run dovresti vedere un grafico a linee che mostra i dati di vendita per ogni mese passo 7 – aggiungere interattività e personalizzazione per rendere il tuo grafico più interattivo e visivamente attraente, puoi personalizzarlo ulteriormente 7 1 personalizza l'aspetto del grafico modifica il linechartbardata nel tuo build metodo 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 aggiunge un'area riempita sotto la linea dotdata mostra punti in ciascun punto dati 7 2 abilita interazioni touch puoi abilitare le interazioni touch per visualizzare i tooltip aggiungi quanto segue al tuo linechartdata touchdata linetouchdata( touchtooltipdata linetouchtooltipdata( tooltipbgcolor colors blueaccent, ), ), passo 8 – visualizzazione di diversi tipi di grafico puoi anche visualizzare altri tipi di grafici utilizzando fl chart 8 1 esempio di grafico a torta sostituisci il linechart nel tuo build metodo con un 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 definisce ogni sezione del grafico a torta conclusione in questo tutorial, hai imparato come utilizzare il fl chart pacchetto per visualizzare i dati nella tua applicazione flutter hai integrato back4app come soluzione backend per memorizzare e recuperare dati utilizzando il parse sdk recuperando dati da back4app e visualizzandoli utilizzando vari tipi di grafico, ora puoi costruire visualizzazioni di dati dinamiche e interattive nelle tue app flutter per migliorare ulteriormente la tua applicazione, considera di esplorare altri tipi di grafico forniti da fl chart , come grafici a barre e grafici radar puoi anche implementare aggiornamenti dei dati in tempo reale integrando le live queries di back4app risorse aggiuntive documentazione di back4app https //www back4app com/docs pacchetto fl chart su pub dev https //pub dev/packages/fl chart guida al parse sdk per flutter https //docs parseplatform org/flutter/guide/ documentazione ufficiale di flutter https //flutter dev/docs assicurati di sostituire i valori segnaposto come 'your application id' e 'your client key' con le tue credenziali reali di back4app buon coding!