Wie man Daten in Flutter mit fl_chart und Back4App visualisiert

einführung datenvisualisierung ist ein entscheidender aspekt moderner anwendungen, der den benutzern hilft, komplexe daten durch intuitive grafiken und diagramme zu verstehen in diesem tutorial lernen sie, wie sie interaktive und visuell ansprechende diagramme in ihrer flutter anwendung mit dem fl chart paket erstellen darüber hinaus integrieren sie back4app – eine backend as a service (baas) plattform, die von parse server betrieben wird – um daten für ihre diagramme zu speichern und abzurufen am ende dieses tutorials haben sie eine voll funktionsfähige flutter app, die dynamische daten anzeigt, die von back4app abgerufen werden, und zwar mit verschiedenen diagrammtypen wie linien , balken und tortendiagrammen voraussetzungen um dieses tutorial abzuschließen, benötigen sie ein back4app konto wenn sie noch keines haben, können sie sich für ein kostenloses konto bei back4app https //www back4app com/ anmelden flutter sdk auf ihrem lokalen computer installiert sie können die offizielle flutter installationsanleitung https //flutter dev/docs/get started/install für ihr betriebssystem befolgen grundkenntnisse in dart und flutter wenn sie neu bei flutter sind, sollten sie die flutter dokumentation https //flutter dev/docs durchsehen, um sich mit den grundlagen vertraut zu machen parse server sdk für flutter in ihr projekt integriert sie können lernen, wie sie es einrichten, indem sie die back4app flutter sdk anleitung https //www back4app com/docs/flutter/parse flutter sdk befolgen eine ide oder einen texteditor wie visual studio code oder android studio schritt 1 – einrichten des back4app backends in diesem schritt erstellen sie eine neue back4app anwendung und richten eine datenklasse ein, um ihre diagrammdaten zu speichern 1 1 erstellen sie eine neue back4app anwendung melden sie sich bei ihrem back4app dashboard https //dashboard back4app com/ an klicken sie auf "neue app erstellen" geben sie einen namen für ihre anwendung ein, z b "flutterchartapp" , und klicken sie auf "erstellen" 1 2 richten sie das datenmodell ein navigieren sie in ihrem anwendungs dashboard zum "datenbank" bereich in der linken seitenleiste klicken sie auf "klasse erstellen" oben auf der seite in dem erscheinenden modalfenster wählen sie "benutzerdefiniert" aus geben sie "salesdata" als klassennamen ein klicken sie auf "klasse erstellen" 1 3 fügen sie der klasse spalten hinzu klicken sie in der "salesdata" klasse auf "+" um eine neue spalte hinzuzufügen fügen sie die folgenden spalten hinzu monat typ string verkäufe typ zahl ihr datenmodell ist jetzt eingerichtet, um monatliche verkaufsdaten zu speichern, die sie in ihrer flutter app visualisieren werden schritt 2 – füllen der datenbank mit beispieldaten bevor sie daten in ihrer app abrufen, benötigen sie einige beispieldaten in ihrer back4app datenbank bleiben sie in der "salesdata" klasse und klicken sie auf "+" um eine neue zeile hinzuzufügen geben sie die folgenden beispieldaten ein wiederholen sie die obigen schritte, um alle beispieldatensätze hinzuzufügen schritt 3 – einrichten des flutter projekts in diesem schritt erstellen sie ein neues flutter projekt und fügen die erforderlichen abhängigkeiten hinzu 3 1 erstellen sie ein neues flutter projekt öffnen sie ihr terminal und führen sie aus flutter create flutter chart app navigieren sie zum projektverzeichnis cd flutter chart app 3 2 abhängigkeiten zu pubspec yaml öffnen sie pubspec yaml und fügen sie die folgenden abhängigkeiten hinzu dependencies flutter sdk flutter fl chart ^0 60 0 parse server sdk flutter ^4 0 1 führen sie flutter pub get aus, um die pakete zu installieren schritt 4 – parse in ihrer flutter app initialisieren um ihre flutter app mit back4app zu verbinden, müssen sie das parse sdk initialisieren 4 1 back4app anwendungsanmeldeinformationen erhalten navigieren sie in ihrem back4app dashboard zu "app einstellungen" > "sicherheit & schlüssel" notieren sie sich ihre anwendungs id und client schlüssel 4 2 parse in main dart öffnen sie lib/main dart und ändern sie es wie folgt 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(), ); } } ersetzen sie 'your application id' und 'your client key' mit den anmeldeinformationen, die sie von back4app erhalten haben schritt 5 – daten von back4app abrufen in diesem schritt werden sie die verkaufsdaten von back4app mit dem parse sdk abrufen 5 1 erstellen sie home page dart erstellen sie eine neue datei lib/home page dart und fügen sie den folgenden code hinzu 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, ); } } erklärung salesdata klasse eine einfache modellklasse zur speicherung der monats und verkaufsdaten fetchsalesdata() ruft daten aus der salesdata klasse in back4app ab und aktualisiert die chartdata liste linechart verwendet fl chart , um ein liniendiagramm basierend auf den abgerufenen daten zu erstellen bottomtitlewidgets() passt die beschriftungen der unteren achse an, um die monatsabkürzungen anzuzeigen schritt 6 – die app ausführen jetzt, da sie das frontend und das backend eingerichtet haben, ist es zeit, ihre app auszuführen navigieren sie in ihrem terminal zu ihrem projektverzeichnis führen sie die app mit folgendem befehl aus flutter run sie sollten ein liniendiagramm sehen, das die verkaufsdaten für jeden monat anzeigt schritt 7 – interaktivität und anpassung hinzufügen um ihr diagramm interaktiver und visuell ansprechender zu gestalten, können sie es weiter anpassen 7 1 erscheinungsbild des diagramms anpassen ändern sie die linechartbardata in ihrer build methode 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 fügt einen gefüllten bereich unter der linie hinzu dotdata zeigt punkte an jedem datenpunkt an 7 2 touch interaktionen aktivieren sie können touch interaktionen aktivieren, um tooltips anzuzeigen fügen sie folgendes zu ihrem linechartdata touchdata linetouchdata( touchtooltipdata linetouchtooltipdata( tooltipbgcolor colors blueaccent, ), ), schritt 8 – verschiedene diagrammtypen anzeigen sie können auch andere diagrammtypen mit fl chart anzeigen 8 1 beispiel für ein kreisdiagramm ersetzen sie das linechart in ihrer build methode durch ein 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 definiert jeden abschnitt des kreisdiagramms fazit in diesem tutorial haben sie gelernt, wie sie das fl chart paket verwenden, um daten in ihrer flutter anwendung zu visualisieren sie haben back4app als backend lösung integriert, um daten mit dem parse sdk zu speichern und abzurufen durch das abrufen von daten von back4app und deren anzeige mit verschiedenen diagrammtypen können sie jetzt dynamische und interaktive datenvisualisierungen in ihren flutter apps erstellen um ihre anwendung weiter zu verbessern, sollten sie andere von fl chart , wie balkendiagramme und radardiagramme, bereitgestellte diagrammtypen erkunden sie können auch echtzeitdatenaktualisierungen implementieren, indem sie live queries von back4app integrieren zusätzliche ressourcen back4app dokumentation https //www back4app com/docs fl chart paket auf pub dev https //pub dev/packages/fl chart parse sdk für flutter leitfaden https //docs parseplatform org/flutter/guide/ offizielle flutter dokumentation https //flutter dev/docs bitte stellen sie sicher, dass sie platzhalterwerte wie 'your application id' und 'your client key' durch ihre tatsächlichen back4app anmeldeinformationen ersetzen viel spaß beim programmieren!